对于SCSS中的循环，结合变量[重复]-ForloopinSCSSwithacombinationofvariables[duplicate]

44  

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

不是使用插值生成变量名，您可以创建一个列表并使用第n种方法获取值。为了实现插值，语法应该是#{$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;
        }
    }
}

28  

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 @each rule instead of @for loop 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
• 不需要使用length()函数来计算列表的长度
• You don't need to use nth() function
• 不需要使用nth()函数
• @each rule is more semantic than @for directive
• @每个规则都比@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指令中包含每个$color，而不是声明$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

@每个指令的Sass引用。

14  

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}。您可以在SASS关于插值的引用中看到其他示例。