SASS map with default values

Imagine you are working on some component library.

You want to offer to your consumers the possibility to customize the style of your components by changing SASS variables.

For that matter, you are aware of the !default flag.

$primary: green !default;
$secondary: blue !default;

$margin: 20px !default;

$color-palette: (
  primary: $primary,
  secondary: $secondary
) !default;

Using the !default flag for numbers and colors works great. They also work for map structures but with one caveat: the new map structure replaces the old one.

To add an extra color to the palette, you have to define the palette with all the key-value pairs.

$primary: green;
$secondary: blue;
$ternary: pink;

$color-palette: (
  primary: $primary,
  secondary: $secondary,
  ternary: $ternary
);

@import 'library/settings'

A better solution to give default values to a map structure:

$color-palette: () !default;
$color-palette: map.merge(
  (
    primary: $primary,
    secondary: $secondary
  ),
  $default-palette
)

Consumers of your library can add a ternary color by just adding the new key-value pair to the palette.

$ternary: pink;
$color-palette: (
  ternary: $ternary
);

@import 'library/settings'

Extending the palette with new values could not get easier.