Sass applies all selectors to style block when using @extend

Question

I am running into unexpected behavior when using sass. I'd like to find a solution or explanation as to why this occurs.

When generating code with a loop and using to @extend to include a block of styles, Sass generates to the code with all combination of selectors on all blocks of styles, instead of on the expected style blocks. Here is a minimal example of the current behavior:

@mixin breakpoint-step($i) {
  $screen-activations: (
    'xs',
    'sm'
  );
  %styling {
    flex: 1 1 calc(#{$i} / 12 - 0.625rem);
  }
  @each $activation in $screen-activations {
    .ss-#{$activation} .span-#{$activation}-#{$i} {
        @extend %styling;
    }
  }
}

@include breakpoint-step(1);
@include breakpoint-step(2);
@include breakpoint-step(3);

Results in:

.ss-xs .span-xs-1, .ss-sm .span-sm-1, .ss-xs .span-xs-2, .ss-sm .span-sm-2, .ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(1 / 12 - 0.625rem);
}

.ss-xs .span-xs-1, .ss-sm .span-sm-1, .ss-xs .span-xs-2, .ss-sm .span-sm-2, .ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(2 / 12 - 0.625rem);
}

.ss-xs .span-xs-1, .ss-sm .span-sm-1, .ss-xs .span-xs-2, .ss-sm .span-sm-2, .ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(3 / 12 - 0.625rem);
}

The expected outcome is:

.ss-xs .span-xs-1, .ss-sm .span-sm-1 {
  flex: 1 1 calc(1 / 12 - 0.625rem);
}

.ss-xs .span-xs-2, .ss-sm .span-sm-2 {
  flex: 1 1 calc(2 / 12 - 0.625rem);
}

.ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(3 / 12 - 0.625rem);
}

Here is a SassMeister gist: https://www.sassmeister.com/gist/d934d9e1a03dd29fe3cb2b504cb7f948

Any ideas why this occurs?

Answer 1

I found a solution to this issue, but not an answer to why it occurs.

Here is the workaround I came up with:

$range: 3;

@for $i from 1 through $range {
    %styling-#{$i} {
        flex: 1 1 calc(#{$i} / 12 - 0.625rem);
    }
}

@mixin breakpoint-step($i) {
  $screen-activations: (
    'xs',
    'sm'
  );
  @each $activation in $screen-activations {
    .ss-#{$activation} .span-#{$activation}-#{$i} {
        @extend %styling-#{$i}; // hack here
    }
  }
}

@for $i from 1 through $range {
  @include breakpoint-step($i);
}

Results in:

.ss-xs .span-xs-1, .ss-sm .span-sm-1 {
  flex: 1 1 calc(1 / 12 - 0.625rem);
}

.ss-xs .span-xs-2, .ss-sm .span-sm-2 {
  flex: 1 1 calc(2 / 12 - 0.625rem);
}

.ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(3 / 12 - 0.625rem);
}