mergesassmaps

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

Solution

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