Question

我有一张颜色地图，并希望根据地图中先前定义的颜色在地图中定义后续颜色。

$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%))      
);

我想根据grey指定grey-light，grey-dark和map-get($colors, black)。

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

您可以引用同一地图对象中的属性吗？

Answer 1

不，您无法在同一地图对象中引用地图的属性。在到达分号之前，地图不是真正定义的，所以在此之前，它自己的属性不可用于引用。这是一个类似的现有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执行浅合并，最适合平面一维地图;如果您正在处理合并更深层次的多维地图，您可能需要定义并使用recursive function而不是map-merge。

如何引用地图对象内的属性

1 个答案: