我有一张颜色 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 对象中引用一个属性吗?
最佳答案
不可以,您不能在同一个 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
。
关于sass - 如何引用 map 对象内部的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46273116/