使用@extend时，Sass将所有选择器应用于样式块

Question

使用sass时出现意外行为。我想找到一种解决方案或解释，以解释为什么会发生这种情况。

[循环生成代码并使用@extend包括样式块时，Sass会使用所有样式块上的选择器的所有组合，而不是预期样式块上的选择器的所有组合来生成代码。这是当前行为的一个最小示例：

@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);

结果：

.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);
}

预期结果是：

.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);
}

这里是SassMeister的要点：https://www.sassmeister.com/gist/d934d9e1a03dd29fe3cb2b504cb7f948

任何想法为什么会发生这种情况？

Answer 1

我找到了解决此问题的方法，但没有找到原因的答案。

这是我想出的解决方法：

$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);
}

结果：

.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);
}