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

For loop in SCSS with a combination of variables

提问by tobyn

I've got a bunch of elements: (#cp1, #cp2, #cp3, #cp4)

我有一堆元素：(#cp1, #cp2, #cp3, #cp4)

that I want to add a background colour to using SCSS.

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

My code is:

我的代码是：

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

回答by Xabriel

Instead of generating the variables names using interpolation you can create a list and use the nthmethod to get the values. For the interpolation to work the syntax should be #{$i}, as mentioned by hopper.

您可以创建一个列表并使用该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;
        }
    }
}

回答by Alex Guerrero

As @hopper has said the main problem is that you haven't prefixed interpolated variables with a dollar sign so his answer should be marked as the correct, but I want to add a tip.

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

Use @eachrule instead of @forloop for this specific case. The reasons:

在这种特定情况下使用@each规则而不是@for循环。原因：

• You don't need to know the length of the list
• You don't need to use length()function to calculate the length of the list
• You don't need to use nth() function
• @eachrule is more semantic than @fordirective

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

The code:

编码：

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

Or if you prefer you can include each $colour in the @each directive instead of declare $colors variable:

或者，如果您愿意，可以在 @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;
        }
    }
}

Sass Reference for @eachdirective

@each指令的Sass 参考

回答by hopper

SASS variables still need to be prefixed with a dollar sign inside interpolations, so every place you have #{i}, it should really be #{$i}. You can see other examples in the SASS reference on interpolations.

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