使用@while 循环创建动态类名 [英] Create dynamic class names using @while loop

问题描述

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

I want to create the following in a stylesheet using SASS:

.dC1, .dC2, .dC3 {
    color: white;
}
.dC4, .dC5 {
    color: black;
}

在 SASS 中使用 @while 循环，如下所示(我知道这有点不对，我会在弄清楚如何设置后对其进行改进):

using a @while loop in SASS such as the following (I know it's a bit off, I will refine it once I figure out how to set it up):

$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 文件中，因此我可以即时"更改不同级别和类的数量.

Yes, I know it's ugly as sin but I think it gets across what I want. Ultimately the $whiteLevel and $blackLevel (or whateever I end up calling them) will be in a _base.scss file so I can change the different levels and number of classes "on the fly."

是否有可能做到，有人能指出我正确的方向吗?

Is it possible to do it and can someone point me in the right direction?

提前致谢并期待听到任何建议！

Thanks in advance and looking forward to hearing any suggestions!

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

To clarify I can use the following code to get the same result:

$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，我想使其不创建任何类.

Which is the 99% solution, but it means I have to have a specific class already built to accomodate the @extend. My goal is to make this totally dynamic and dependent on the values of $whiteLevel and $blackLevel. If I set them to 0 I want to make it so no class is created.

希望有助于澄清一点.

编辑编辑！

感谢 cimmanon，这是我将使用的解决方案(基于提供的解决方案，一定要喜欢那个 % 符号):

Thanks to cimmanon here is the solution I will using (based on provided solution, gotta love that % sign):

$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！

Many thanks cimmanon!

推荐答案

要正确地编写该表达式应该是这样的:

To correctly write that expression would be like this:

$val: $val + '.dC#{$i}';

但是您忘记考虑逗号，因此您的选择器最终看起来像这样:

But you're forgetting to account for the comma, so your selector ends up looking like this:

.dC4.dC5 {
  color: black;
}

即使您确实添加了逗号，您最终也会以逗号开头的所有 3 个类.有更有效的方法来做你正在寻找的正确解释逗号的方法:

Even if you did add the comma, you'd end up with all 3 classes preceded by a comma. There are more efficient ways to do what you're looking for that properly account for commas:

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

这篇关于使用@while 循环创建动态类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！