Question

我想将三张Sass地图合并到一张地图中。使用map-merge函数，我只能将两个映射合并在一起。如何合并两个以上的地图？

我的情况缩写示例：

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

Answer 1

我意识到这有点晚了，但由于这是我在google搜索时能找到的唯一解决方案，我想将其发布给寻找类似解决方案的其他人。

我偶然发现了这个问题试图找到相同的答案，虽然@ 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);功能，因此需要SASS 3.3+。

Answer 2

如果map-merge采用2个映射并返回单个映射，但是您有3个映射...则使用map-merge两次。

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

Answer 3

注意：从Dart Sass 1.23.0开始，可以通过地图模块进行合并。

@use "sass:map";

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
// (
//   "lightest": 100,
//   "light": 300,
//   "medium": 500,
//   "bold": 700
// )

// map.merge() can be used to add a single key/value pair to a map.
@debug map.merge($light-weights, ("lighter": 200));
// ("lightest": 100, "light": 300, "lighter": 200)

// It can also be used to overwrite a value in a map.
@debug map.merge($light-weights, ("light": 200));
// ("lightest": 100, "light": 200)

有关更多示例，请参见文档： https://sass-lang.com/documentation/modules/map

合并多个Sass地图

3 个答案: