Объединить несколько карт Sass

Question

У меня есть три карты 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);

Answer 1

Если map-merge берет 2 отображения и возвращает одно отображение, но у вас есть 3 отображения... вы используете map-merge дважды.

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

Answer 2

Я понимаю, что это немного поздно, но так как это было единственное решение, которое я мог найти во время поиска в 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); 

Так как это использует map-merge функция, требуется SASS 3.3+.

Answer 3

Bootstrap имеет собственную функцию слияния нескольких карт:

• https://getbootstrap.com/docs/5.3/customize/color/#generating-utilities
• https://github.com/twbs/bootstrap/blob/323f9d6f687ab148da4ad074e0eddef8ab3b132b/scss/_functions.scss#L100C1-L107C2

Я добавил это сюда для справки, но, как вы заметили, оно такое же, как и от user664904

      @function map-merge-multiple($maps...) {
  $merged-maps: ();

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

Answer 4

Примечание. Начиная с 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