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

地图的全部意义在于以更加分层的方式构建数据，而不仅仅是一堆变量。如果你不想这样，首先定义变量而不是地图。

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

map-get($colors, blue)

Answer 2

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

例子

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

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

.bacon {
  color: color(blue);
}

结果

.bacon {
  color: #0081d2;
}

Sass map 产生变量名

Sass map produce variable names

css

variables

dictionary

sass