title: Dynamically build up a SASS map and then use the values
body: <p>Based upon some simple SASS logic, I'm trying to generate a list or map of colors dynamically. Starting with a static list first:</p>
  
  <pre><code>$mypalette: (
     'jungle':    $color-green,
     'sky':       $color-blue,
     'sunset':    $color-orange,
     'saddle':    $color-saddle,
     'gold':      $color-gold,
     'ivory':     $color-ivory,
     'olive':     $color-olive
   );
  </code></pre>
  
  <p>Next, I want to start adding colors to this map, dynamically:</p>
  
  <pre><code> $n : 'newcolor';
   $v : #ffffff;
  
   $mypalette: append($mypalette, ($n $v)); 
  
   @each $color in $mypalette {
      @debug $color;
   }
  </code></pre>
  
  <p>As you can see, both the name and the value of the newly item are dynamic, stored in a variable. Somewhat to my surprise, this works. The debug output does show the new value added correctly:</p>
  
  <p>DEBUG: "sunset" #ff9800<br>
  DEBUG: "saddle" #8b4513<br>
  DEBUG: "gold" #ffd700<br>
  DEBUG: "ivory" #fffff0<br>
  DEBUG: "olive" #808000<br>
  DEBUG: "newcolor" #ffffff  </p>
  
  <p>The very last part is to actually use a value from list:</p>
  
  <pre><code> html {
      background: map-get($mypalette, 'ivory') !important;
   }
  </code></pre>
  
  <p>Unfortunately, this is where it falls apart:</p>
  
  <pre><code>&gt; error src/scss/main.scss (Line 401 of src/scss/_theme.scss: $map:
  &gt; (("jungle" #bbd910), ("sky" #2196f3), ("sunset" #ff9800), ("saddle"
  &gt; #8b4513), ("gold" #ffd700), ("ivory" #fffff0), ("olive" #808000), ("newcolor" #ffffff)) is not a map for `map-get')
  </code></pre>
  
  <p>It doesn't seem to matter which value of the map I am trying to look up, it always throws this error. Question on my mind is, is what I want to accomplish simply impossible or am I overlooking a basic syntax error?</p>