访问变量的名称而不是其值

Question

我正在尝试编写一个循环来循环颜色并压缩我的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; }
}

Answer 1

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

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

Answer 2

雅，从操作开始已经有一段时间了，但是想想，无论如何我都会添加它：）

这是您正在寻找的最少重复次数。 您可以在$ 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};
    }
}

Answer 3

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

我使用荷兰语颜色名称，我这样做的目的是为了明确我们不处理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; }

Answer 4

根据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