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);
If map-merge takes 2 mappings and returns a single mapping, but you have 3 mappings... you use map-merge twice.
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:
And use it like so:
Since this uses the
map-merge
function, SASS 3.3+ is required.