title: SCSS map-merge functions
body: <p>Hello I am trying to make a more advanced map-merge function. Currently I only have the colors inside the "red: ( );" </p>
  
  <p><a href="https://codepen.io/anon/pen/ALmLLA" rel="nofollow">full example on codepen</a></p>
  
  <pre><code>$red:   #f00;
  $green: #0f0;
  $blue:  #00f;
  $colours: $red $green $blue;
  $output: ();
  
  @each $current-colour in $colours {
     $i: index($colours, $current-colour);
     $output: map-merge($output, ($i*100:$current-colour));
  }
  
  $rgbcolors (
       red: ( 
           //only this is being generated with the code
           100: $red,
           200: $green,
           300: $blue
       )
   ) !default;
  </code></pre>
  
  <p>I want to be able to generate the code inside the map.</p>
  
  <pre><code>$rgbcolors (
       // I want to generate the code here So instead of applying the values inside the map I can make the "green" and the "blue" map headers and also create the values inside it
       red: ( 
           100: $red,
           200: $red,
           300: $red
       ),
       green: ( 
           100: $green,
           200: $green,
           300: $green
       ),
       blue: ( 
           100: $blue,
           200: $blue,
           300: $blue
       )
   ) !default;
  </code></pre>
  
  <p>Then to take it a step further I want to lighten and darken the first and third values.</p>
  
  <pre><code>......
  green: ( 
      100: lighten($green, 5%),
      200: $green,
      300: darken($green, 5%)
   ),
  .....
  </code></pre>
  
  <p>Would I need a @for and and @each to make this work?</p>