这个问题在这里已经有了答案:
How to dynamically generate a list of classes with commas separating them?
(3 个回答)
5年前关闭。
我想使用 SASS 在样式表中创建以下内容:
.dC1, .dC2, .dC3 {
color: white;
}
.dC4, .dC5 {
color: black;
}
在 SASS 中使用 @while 循环,如下所示(我知道它有点不对劲,一旦我弄清楚如何设置它,我就会改进它):
$i: 1;
$whiteLevel: 3;
$blackLevel: 5;
$val: nil;
@while $i <= $whiteLevel {
$val: $val + .dC#{$i};
$i: $i + 1;
}
$val {
color: white;
}
$val: nil;
@while $i > $whiteLevel and $i <= $blackLevel {
$val: $val + .dC#{$i};
$i: $i + 1;
}
$val {
color: black;
}
是的,我知道它像罪一样丑陋,但我认为它符合我的要求。最终,$whiteLevel 和 $blackLevel(或我最终调用它们的任何内容)将位于 _base.scss 文件中,因此我可以“即时”更改不同的级别和类的数量。
是否有可能做到这一点,有人可以指出我正确的方向吗?
提前致谢并期待听到任何建议!
编辑:为了澄清我可以使用以下代码来获得相同的结果:
$whiteLevel: 3;
.cW {
color: white;
}
.cB {
color: black;
}
@for $i from 1 through 5{
.dC#{$i} {
@if $i <= $whiteLevel {
@extend .cW;
} @else {
@extend .cB;
}
}
}
这产生:
.cW, .dC1, .dC2, .dC3 {
color: white;
}
.cB, .dC4, .dC5 {
color: black;
}
这是 99% 的解决方案,但这意味着我必须已经构建了一个特定的类来容纳@extend。我的目标是使这完全动态并依赖于 $whiteLevel 和 $blackLevel 的值。如果我将它们设置为 0,我想这样做,因此不会创建任何类。
希望这有助于澄清一点。
编辑编辑!
感谢 cimmanon,这是我将使用的解决方案(基于提供的解决方案,必须喜欢那个 % 符号):
$whiteLevel: 3;
%cW {
color: white;
}
%cB {
color: black;
}
@for $i from 1 through 5{
.dC#{$i} {
@if $i <= $whiteLevel {
@extend %cW;
} @else {
@extend %cB;
}
}
}
非常感谢西曼农!
最佳答案
要正确编写该表达式,将是这样的:
$val: $val + '.dC#{$i}';
但是您忘记考虑逗号,因此您的选择器最终看起来像这样:
.dC4.dC5 {
color: black;
}
即使您确实添加了逗号,您最终也会以逗号开头的所有 3 个类。有更有效的方法来做你正在寻找的正确解释逗号的方法:
$minLevel: 1;
$whiteLevel: 3;
$blackLevel: 5;
%white {
color: white;
}
@for $i from $minLevel through $whiteLevel {
.dC#{$i} {
@extend %white;
}
}
$blackSelectors: ();
@for $i from $whiteLevel + 1 through $blackLevel {
$blackSelectors: append($blackSelectors, unquote('.dC#{$i}'), comma);
}
#{$blackSelectors} {
color: black;
}
输出:
.dC1, .dC2, .dC3 {
color: white;
}
.dC4, .dC5 {
color: black;
}
关于sass - 使用@while 循环创建动态类名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16496353/