Sass map 生成变量名

Question

我在 Sass 中有一个带有键和值的地图

 $colors: (blue: #0081d2, green: #288600, orange: #e57323);

 @each $color, $value in $colors {
    .#{$color} {
        color: $value; 
    }
 }

这有效并为我提供了具有适当值的 css 类名，例如：

 .blue{
    color: #0082d1;
 }

想要的是一个函数，它根据地图中的键生成 sass 变量。

 $blue:  #0082d1;
 $green: #288600;

我一直在打破我的头，但无法让它发挥作用。

Answer 1

您可以创建一个函数来返回指定键的值。

例子

$colors: (blue: #0081d2, green: #288600, orange: #e57323);

@function color($color) {
    @return map-get($colors, $color);
}

.bacon {
  color: color(blue);
}

结果是

.bacon {
  color: #0081d2;
}