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方法获取值，而不是使用插值生成变量名称。要使插值工作，语法应为#{$i}，如 hopper 所述。

$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指令中包含每种$颜色，而不是声明$ 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;
        }
    }
}

Sass Reference for @each directive

Answer 3

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

对于SCSS中的循环与变量的组合

3 个答案: