css - Sass 每个函数都在其前面加上美元符号进行编译

Question

我试图在 Sass 中使用 each 循环，但 css 正在使用变量名而不是变量的内容进行编译。

$green-1: #9ae200;
$green-2: #5ea600;
$color-list: green-1 green-2;

@each $single-color in $color-list {
    &.#{$single-color} {
        background-color: $single-color;
    }
}

我正在寻找的输出是:

.green-1 {
    background-color:#9ae200;
}
.green-2 {
    background-color:#5ea600;
}

但是 css 编译为:

.green-1 {
    background-color:green-1;
}
.green-2 {
    background-color:green-2;
}

所以为了让美元符号在那里，我尝试了这个:

@each $single-color in $color-list {
    @function create-variable($variable){
        @return "$" + $variable;
    }

    &.#{$single-color} {
        background-color: create-variable($single-color);
    }
}

但是编译为:

.green-1 {
    background-color:$green-1;
}
.green-2 {
    background-color:$green-2;
}

Sass 出于某种原因没有读取变量，而是按字面意思理解它们。有人知道如何进行这项工作吗？

Answer 1

你不能在 sass 中创建动态变量。相反，您可以使用 map 实现您想要的结果

例子:

$green-1: #9ae200;
$green-2: #5ea600;
$color-map: (
  green-1: $green-1, 
  green-2:  $green-2,
);

.body{
  @each $key,$value in $color-map {
      &.#{$key} {
          background-color: $value;
      }
  }
}