合并多个 Sass 个地图

Merge multiple Sass maps

我想将三张 Sass 地图合并为一张地图。使用地图合并功能,我只能将两个地图合并在一起。如何合并两个以上的地图?

我的情况的简短示例:

    $color-name: (
        blue: (
            default: blue,
            dark: navy,
            light: sky
        )
    );

    $color-event: (
        danger: (
            default: set($color-name, red),
            dark: set($color-name, red, dark),
            light: set($color-name, red, light),
        )
    );

    $color-category: (
        heading: (
            default: set($color-name, grey),
            dark: set($color-name, grey, dark),
            light: set($color-name, grey, light)
        )
    );

    $color: map-merge($color-name, $color-event, $color-category);

如果 map-merge 采用 2 个映射和 returns 单个映射,但你有 3 个映射...你使用 map-merge 两次。

$color: map-merge(map-merge($color-name, $color-event), $color-category);

我意识到这有点晚了,但由于这是我在谷歌搜索时能找到的唯一解决方案,我想post为其他寻找类似解决方案的人提供此解决方案。

我偶然发现了这个问题,试图找到相同的答案,虽然@cimmanon 的答案可能适用于您仅组合 3 张地图的特定示例,但如果您想组合,比如 10 张地图,这不是一个好的解决方案.我想要一个可以应用于 3 个地图或 50 个地图的解决方案。所以我编写了一个函数来处理将多个地图合并在一起:

@function map-collect($maps...) {
  $collection: ();

  @each $map in $maps {
    $collection: map-merge($collection, $map);
  }
  @return $collection;
}

然后像这样使用它:

$colors: map-collect($color-name, $color-event, $color-category); 

由于使用了map-merge函数,因此需要SASS3.3+。