带有变量组合的SCSS中的for循环[重复]

Posted 2023-03-05

【中文标题】带有变量组合的SCSS中的for循环[重复]

【英文标题】：For loop in SCSS with a combination of variables [duplicate]

【发布时间】：2012-05-21 04:10:48

【问题描述】：

我有一堆元素： (#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;
        
    

【问题讨论】：

这段代码有什么问题？

【参考方案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;
        
    

【讨论】：

获取列表长度可能比硬编码更好：@for $i from 1 through length($colors) ...

当然最好不要硬编码长度。我应用了更改。谢谢史蒂夫。

这个响应应该被验证。

【参考方案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 指令中包含每个 $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

【参考方案3】：

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