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

Question

我想使用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;
        }
    }
}

非常感谢cimmanon!

Answer 1

要正确地写出该表达式将是这样的:

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