Question

我正在尝试使用Sass中的每个循环，但是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中创建动态变量。相反，您可以使用地图

获得所需的结果

示例：

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

Sass的每个功能都在前面用美元符号编译

1 个答案: