Forcing(?) SASS to output same valued declarations as a single declaration

Question

I'm trying to get several CSS declarations with the same value to be declared on a single declaration. I've come across this problem a few times, one example here, but this time is a more simple example.

Desired output:

.flex-col-1 div.pagebuilder-column-group,
.flex-col-2 div.pagebuilder-column-group,
.flex-col-3 div.pagebuilder-column-group,
.flex-col-4 div.pagebuilder-column-group,
.flex-col-5 div.pagebuilder-column-group,
.flex-col-6 div.pagebuilder-column-group,
.flex-col-7 div.pagebuilder-column-group,
.flex-col-8 div.pagebuilder-column-group {
  gap: 1rem;
}

Current SCSS:

@mixin initial-gap() {
  @each $rows in $row-amounts {
    .flex-col-#{$rows} {
      & div.pagebuilder-column-group {
        gap: 1rem;
      }
    }
  }
}

Current output:

.flex-col-1 div.pagebuilder-column-group {
  gap: 1rem;
}

.flex-col-2 div.pagebuilder-column-group {
  gap: 1rem;
}

.flex-col-3 div.pagebuilder-column-group {
  gap: 1rem;
}

.flex-col-4 div.pagebuilder-column-group {
  gap: 1rem;
}

.flex-col-5 div.pagebuilder-column-group {
  gap: 1rem;
}

.flex-col-6 div.pagebuilder-column-group {
  gap: 1rem;
}

.flex-col-7 div.pagebuilder-column-group {
  gap: 1rem;
}

.flex-col-8 div.pagebuilder-column-group {
  gap: 1rem;
}

The only way I've found, thus far, is to implicitly declare them in the mixin. Any other ways of achieving the desired CSS??

eg.

@mixin initial-gap() {
  .flex-col-1,
  .flex-col-2,
  .flex-col-3,
  .flex-col-4,
  .flex-col-5,
  .flex-col-6,
  .flex-col-7,
  .flex-col-8 {
    & div.pagebuilder-column-group {
      gap: 1rem;
    }
  }
}

@PCDSandwichMan, THANK YOU SO MUCH!! I HAD BEEN STRUGGLING WITH THIS FOR A FEW WEEKS AND WASN'T PUZZLING IT TOGETHER, IT MAKES SO MUCH SENSE NOW!!! CHEEEEEEEERSSSS. sorry for caps. — Adan Moses, Oct 31 '22 at 02:04

score 1 · Accepted Answer · answered Oct 31 '22 at 01:07

1

This should work. I referred to this post.

%foo {
    gap: 1rem; }

@for $i from 1 through 8 {
    .flex-col-#{$i}  div.pagebuilder-column-group {
        @extend %foo;
    }
}

answered Oct 31 '22 at 01:07

Lisa

323
3
14

1

Finally . TYSM! – Adan Moses Oct 31 '22 at 02:05

Forcing(?) SASS to output same valued declarations as a single declaration

1 Answers1