I am encountering unexpected behavior while utilizing sass. I am eager to uncover a solution or rationale behind this issue.
When creating code with a loop and using @extend to incorporate a set of styles, Sass is generating the code with all possible combinations of selectors on every block of styles, instead of only on the intended style blocks. Below is a concise example illustrating this 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);
This 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 anticipated result should be:
.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);
}
For reference, visit the SassMeister gist:
Any insights into why this phenomenon is happening?