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)

Sass地图生成变量名称

2 个答案: