小编anj*_*Guy的帖子

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

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

.dC1, .dC2, .dC3 {
    color: white;
}
.dC4, .dC5 {
    color: black;
}
Run Code Online (Sandbox Code Playgroud)

在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;
}
Run Code Online (Sandbox Code Playgroud)

是的,我知道它像罪一样丑陋,但我认为它符合我想要的.最终$ whiteLevel和$ blackLevel(或者我最终调用它们)将在_base.scss文件中,这样我就可以"动态"更改不同级别和类别的数量.

有可能做到这一点,有人能指出我正确的方向吗?

提前致谢,期待听到任何建议!

编辑:为了澄清我可以使用以下代码来获得相同的结果:

$whiteLevel: 3;

.cW {
    color: white;
} …
Run Code Online (Sandbox Code Playgroud)

sass

11
推荐指数
1
解决办法
8207
查看次数

标签 统计

sass ×1