Sass 使用@while循环创建动态类名

Sass 使用@while循环创建动态类名,sass,Sass,我想使用SASS在样式表中创建以下内容: .dC1, .dC2, .dC3 { color: white; } .dC4, .dC5 { color: black; } 在SASS中使用@while循环,如以下所示(我知道有点不对劲,一旦我弄清楚如何设置它,我将对其进行优化): 这是99%的解决方案,但这意味着我必须已经构建一个特定的类来容纳@extend。我的目标是使其完全动态,并依赖于$whiteLevel和$blackLevel的值。如果我将它们设置为0,我希望使其成为0

我想使用SASS在样式表中创建以下内容:

.dC1, .dC2, .dC3 {
    color: white;
}
.dC4, .dC5 {
    color: black;
}
在SASS中使用@while循环,如以下所示(我知道有点不对劲,一旦我弄清楚如何设置它,我将对其进行优化):

这是99%的解决方案,但这意味着我必须已经构建一个特定的类来容纳@extend。我的目标是使其完全动态,并依赖于$whiteLevel和$blackLevel的值。如果我将它们设置为0,我希望使其成为0,这样就不会创建任何类

希望这有助于澄清一点

编辑

感谢cimmanon,我将使用以下解决方案(基于提供的解决方案,我一定会喜欢这个%sign):

$whiteLevel:3;
%连续波{
颜色:白色;
}
%cB{
颜色:黑色;
}
@从1美元到5美元{
.dC{$i}{

@如果$i要正确编写该表达式,如下所示:

$val: $val + '.dC#{$i}';
.dC4.dC5 {
  color: black;
}
但是您忘了考虑逗号,因此选择器的结果如下所示:

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

是否尝试运行此代码?是否有错误(错误是什么?)?输出是否不正确?引发以下错误:语法错误:“$val:$val+”后的CSS无效:预期表达式(例如1px,粗体),Was“.dC#{$i};”我们在同一时间发布了帖子,在查看了您的答案后,我错过的只是%而不是。作为选择器。谢谢!
$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;
}