Sass 映射生成变量名称

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

Answer 2

地图的全部意义在于以更分层的方式构建数据，而不仅仅是一堆变量。如果您不希望这样做，请首先定义变量而不是映射。

但我猜你真正想要的是一种访问地图值的方法。试试这个：

map-get($colors, blue)