How to override two maps in scss

Question

SCSS

$colors: (
   primary:      red,
   secondary:    blue,
   accent:       #ddd,
) !default;

$colors: (
   primary:      green,
   secondary:    purple,
   black:        #000,
   white:        #fff,
);

@each $color, $value in $colors {
  .alert-#{$color} {
    color: $value;
  }
}

Result

.alert-primary {
     color: green;
}
 .alert-secondary {
     color: purple;
}
 .alert-black {
     color: #000;
}
 .alert-white {
     color: #fff;
}

I wanted to create a SASS framework something like bootstrap. Wanted to override theme colors. How can i merge these maps to get something like this? I want a simple solution.

Expected result

.alert-accent {
   color: #ddd;
}
.alert-primary {
   color: green;
}
.alert-secondary {
   color: purple;
}
.alert-black {
   color: #000;
}
.alert-white {
   color: #fff;
}

Answer 1

You can use map-merge :

$colors: map-merge($colors, (
   primary:      green,
   secondary:    purple,
   black:        #000,
   white:        #fff
));

From the documentation, this function:

Returns a new map with all the keys and values from both $map1 and $map2 .

This can also be used to add a new value or overrwrite a value in $map1 , by passing a single key/value pair as $map2 .

If both $map1 and $map2 have the same key, $map2 's value takes precedence.