Merge multiple Sass maps

Question

I have three Sass maps that I want to merge into one map. With the map-merge function I can only merge two maps together. How can I merge more than two maps?

A short

Answer 1

Note: Starting with Dart Sass 1.23.0, merge will be available via the map module.

@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)

See documentation for more examples: https://sass-lang.com/documentation/modules/map