Sass映射产生变量名[重复]答案

【问题标题】：Sass map produce variable names [duplicate]Sass映射产生变量名[重复]
【发布时间】：2015-06-24 02:04:18
【问题描述】：

我在 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;

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

【问题讨论】：

标签： css variables dictionary sass

【解决方案1】：

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

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

map-get($colors, blue)

【讨论】：

感谢您的回答。你建议我采取不同的策略吗？我想要一个可以放置调色板的地方。并在需要时引用它。

【解决方案2】：

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

示例

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

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

.bacon {
  color: color(blue);
}

结果

.bacon {
  color: #0081d2;
}

【讨论】：