[英]Sass applies all selectors to style block when using @extend
I am running into unexpected behavior when using sass.我在使用 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.当使用循环生成代码并使用
@extend
来包含样式块时,Sass 会使用所有样式块上的所有选择器组合生成代码,而不是在预期的样式块上。 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这是 SassMeister 要点: https ://www.sassmeister.com/gist/d934d9e1a03dd29fe3cb2b504cb7f948
Any ideas why this occurs?任何想法为什么会发生这种情况?
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.