如何访问嵌套的 SASS 变量？

Question

这个 .scss 文件中的几种颜色是这样定义的：

$colors: (
  primary :   #cd0e11,
  secondary:  #23aa0b,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

如何访问它们？假设我想将某些内容设置为主要。

我试过了：

h1 {
color: $colors:primary
}

这是 Ionic 2，所以它可能是特定于框架的东西。

Answer 1

我发现这叫做 SASS 映射。以下将起作用。它就像一个键值提取器。

color: map-get($colors, primary)

查看this 了解更多信息。

Answer 2

你可以试试这个：

h1 {
   color: color($colors, primary);
}

Answer 3

创建地图后，使用函数 map-get()。如有必要，您还可以遍历每个：https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184

$map: (
 color01: value,
 color02: nextValue,
 color03: thirdValue
); 

.element {
  content: map-get($map, color01);
}