CODEWITHSUNDEEP
mergesassmaps
Ben Besuijen
Ben Besuijen

Reputation: 634

Merge multiple Sass maps

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 shortened example of my situation:

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

Upvotes: 12

Views: 10365

Answers (3)

Kim Paulissen
Kim Paulissen

Reputation: 618

bootstrap has its own multiple map merge function:

I've added it here for reference, but as you'll notice it's the same as the one from biggles

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

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

Upvotes: 1

biggles
biggles

Reputation: 3061

I realize this is a bit late, but since this was the only solution I could find while googling I want to post this for others looking for a similar solution.

I stumbled upon this question trying to find the same answer, and while @cimmanon's answer may work for your specific example of combining only 3 maps, it isn't a good solution if you wanted to combine, say 10 maps. I wanted a solution that could be applied to 3 maps or 50. So I wrote a function to handle merging multiple maps together:

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

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

And use it like so:

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

Since this uses the map-merge function, SASS 3.3+ is required.

Upvotes: 36

cimmanon
cimmanon

Reputation: 68319

If map-merge takes 2 mappings and returns a single mapping, but you have 3 mappings... you use map-merge twice.

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

Upvotes: 13

Related Questions