3

我正在尝试编写一个循环来循环颜色并压缩我的 scss 文件中的代码量。这是我所拥有的一个简单示例：

$color1: blue;
$color2: red;
$color3: white;
$color4: black;

.color1-bg { background-color: $color1; }
.color2-bg { background-color: $color2; }

.color1-border { border-color: $color1; }
.color2-border { border-color: $color2; }

等等。

我正在寻找一种编写循环的方法，以便当我使用变量生成类时，它具有变量的名称而不是其值：

@each $color in $colour1, $colour2, $colour3, $colour4 {
    .#{$color}-bg { background-color: $color; }
    .#{$color}-border { border-color: $color; }
}
4

4 回答 4

10

您不能直接访问变量的名称，您必须将其存储为附加值。

Sass 3.2 及更早版本（列表列表）

Sass 还没有映射，所以下一个最好的东西是列表列表。

$color1: ('color1', blue);
$color2: ('color2', red);
$color3: ('color3', white);
$color4: ('color4', black);

@each $color in $color1, $color2, $color3, $color4 {
    $name: nth($color, 1);
    $value: nth($color, 2);
    .#{$name}-bg { background-color: $value; }
    .#{$name}-border { border-color: $value; }
}

Sass 3.3 和更新版本（映射）

从 3.3 开始，您可以访问映射。它在功能上与列表列表相同，但在语法上更简洁。

$colors:
    ( 'color1': blue
    , 'color2': red
    , 'color3': white
    , 'color4': black
    );

@each $name, $value in $colors {
    .#{$name}-bg { background-color: $value; }
    .#{$name}-border { border-color: $value; }
}

交替

或者，如果您的颜色名称确实是“color1”、“color2”等，您也可以即时构建名称，而不是明确指定它们：

$color1: blue;
$color2: red;
$color3: white;
$color4: black;

$num: 0;
@each $color in ($color1, $color2, $color3, $color4) {
    $num: $num + 1;
    .color#{$num}-bg { background-color: $color; }
    .color#{$num}-border { border-color: $color; }
}
于 2012-10-11T17:52:48.023 回答
3

是的，这距离操作已经有一段时间了，但我想，无论如何我都会添加它:)

这是您以最少的重复次数寻找的内容。您可以将新颜色添加到 $eric-holmes-colors 数组并重新编译。

$eric-holmes-colors: "blue", "red", "white", "black";

@each $color in $eric-holmes-colors {
    .#{$color}-bg {
        background-color: #{$color};
    }
    .#{$color}-border {
        border-color: #{$color};
    }
}
于 2014-01-27T16:25:51.383 回答
1

这更多是对先前答案的评论。可以将这两个答案结合起来，从而产生非常优雅的代码（在我看来并不那么谦虚）。

我使用荷兰颜色名称，我这样做是为了明确我们不是在处理 HTML 颜色名称。

$rood      : #e3004a;
$blauw     : #009ee0;

@each $color in ('rood', $rood), ('blauw', $blauw) {

    $name: nth($color, 1);
    $value: nth($color, 2);

    .#{$name} {
        a{
            background-color: $value;
        }                   
    }
}

CSS

.rood a { background-color: #e3004a; }

.blauw a { background-color: #009ee0; }
于 2013-12-11T08:54:23.130 回答
0

根据 sass-reference，您的代码应该是这样的，但我自己没有尝试过。

@each $color in $color1, $color2, $color3, $color4 {
  .#{$color}-bg { background-color: $color;}
  .#{$color}-border { border-color: $color;}
}

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#control_directives

于 2012-10-11T16:20:49.110 回答