Dynamically create a SASS map and then use the values

Based on some simple SASS logic, I am trying to generate a list or color map dynamically. First with a static list:

$mypalette: (
   'jungle':    $color-green,
   'sky':       $color-blue,
   'sunset':    $color-orange,
   'saddle':    $color-saddle,
   'gold':      $color-gold,
   'ivory':     $color-ivory,
   'olive':     $color-olive
 );

Next, I want to dynamically add colors to this map:

 $n : 'newcolor';
 $v : #ffffff;

 $mypalette: append($mypalette, ($n $v)); 

 @each $color in $mypalette {
    @debug $color;
 }

As you can see, the name and value of the new element is dynamic, stored in a variable. Most likely it works. The debug output shows the correct addition of the new value:

DEBUG: sunset # ff9800
DEBUG: saddle # 8b4513
DEBUG: gold # ffd700
DEBUG: ivory # fffff0
DEBUG: olive # 808000
DEBUG: newcolor #ffffff

The very last part is to actually use the value from the list:

 html {
    background: map-get($mypalette, 'ivory') !important;
 }

, :

> error src/scss/main.scss (Line 401 of src/scss/_theme.scss: $map:
> (("jungle" #bbd910), ("sky" #2196f3), ("sunset" #ff9800), ("saddle"
> #8b4513), ("gold" #ffd700), ("ivory" #fffff0), ("olive" #808000), ("newcolor" #ffffff)) is not a map for `map-get')

, , , . , , , ?

+4
1

, , :

$mypalette: (
   jungle: $color-green
);

map-get($mypalette, jungle);

map-merge:

$new: (
    newcolor: #ffffff
);

map-merge($mypalette, $new);
+2

Source: https://habr.com/ru/post/1616948/


All Articles