11

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

非常感谢西马农！

4

1 回答 1

15

要正确编写该表达式，应如下所示：

$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;
}
于 2013-05-11T12:38:33.320 回答