sass - 如何引用 map 对象内部的属性

Question

我有一张颜色 map ，我想根据之前在 map 中定义的颜色来定义 map 中的后续颜色。

$colors: (
    primary: #184770, 
    secondary: #0969A2, 
    white: #fff, 
    black: #000, 
    green: #24b206, 
    blue: #428bca, 
    purple: #813c8e, 
    grey: (lighten( black, 25%)), 
    grey-light: (lighten( black, 35%)), 
    grey-dark: (lighten( black, 15%))      
);

我想根据map-get($colors,黑色)。

上面的例子之所以有效，是因为它引用了固有颜色“黑色”而不是 map-get($colors, black)

你能在同一个 map 对象中引用一个属性吗？

Answer 1

不可以，您不能在同一个 map 对象中引用 map 的属性。在到达分号之前， map 并未真正定义，因此在此之前，它自己的属性无法引用。这是一个类似的现有 question and answer .

如果您想根据初始定义的值添加后续值，一种方法是结合使用 map-get 和 map-merge 函数:

$base-colors: ( 
  black: #000
);

$extended-colors: (
  grey:       lighten(map-get($base-colors, black), 25%),
  grey-light: lighten(map-get($base-colors, black), 35%),
  grey-dark:  lighten(map-get($base-colors, black), 15%)
);

$colors: map-merge($base-colors, $extended-colors);

注意:map-merge 执行最适合平面一维 map 的浅合并；如果您正在处理合并更深层次的多维 map ，您可能需要定义和使用 recursive function而不是 map-merge。