html - 带有变量组合的 SCSS 中的 For 循环

Question

我有一堆元素：（#cp1，#cp2，#cp3，#cp4）

我想为使用 SCSS 添加背景颜色。

我的代码是：

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@for $i from 1 through 4 {
    #cp#{i} {
        background-color: rgba($(colour#{i}), 0.6);

        &:hover {
            background-color: rgba($(colour#{i}), 1);
            cursor: pointer;
        }
    }
}

Answer 1

nth您可以创建一个列表并使用该方法获取值，而不是使用插值生成变量名称。正如hopper#{$i}所提到的，为了使插值工作，语法应该是。

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

$colors: $colour1, $colour2, $colour3, $colour4;

@for $i from 1 through length($colors) {
    #cp#{$i} {
        background-color: rgba(nth($colors, $i), 0.6);

        &:hover {
            background-color: rgba(nth($colors, $i), 1);
            cursor: pointer;
        }
    }
}

Answer 2

正如@hopper 所说，主要问题是您没有在插值变量前面加上美元符号，因此他的答案应该被标记为正确，但我想添加一个提示。

对于这种特定情况，请使用@each规则而不是@for循环。原因：

• 你不需要知道列表的长度
• 您不需要使用length()函数来计算列表的长度
• 您不需要使用 nth() 函数
• @each规则比@for指令更语义化

编码：

$colours: rgb(255,255,255), // white
          rgb(255,0,0),     // red
          rgb(135,206,250), // sky blue
          rgb(255,255,0);   // yellow

@each $colour in $colours {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

或者，如果您愿意，可以在 @each 指令中包含每个 $colour 而不是声明 $colors 变量：

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0);     // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@each $colour in $colour1, $colour2, $colour3, $colour4 {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

@each指令的 Sass 参考

Answer 3

SASS 变量仍然需要在插值中以美元符号为前缀，因此您拥有的每个地方都#{i}应该是#{$i}. 您可以在 SASS 参考中看到关于插值的其他示例。