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

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