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