title: Generating dynamic color map in SASS
body: <p>I'm trying to generate a rather automated system to define colours in SASS. I have a list of colours, defined with a hexidecimal value (like so: <code>$color--deep-ocean: #123143;</code>) and a global <code>$colors: ();</code> definition.</p>
  
  <p>I then want to create their RGBA values dynamically, and given variable interpolation isn't an option in SASS, I've tried my hands at maps.</p>
  
  <p>The idea is to feed a <code>set-color</code> function a name and a color to populate my <code>$colors</code> variable with <code>map-merge</code>, which I can then retrieve with <code>get-color</code>. Here below are my two function definitions and how I'm <em>trying</em> to use them:</p>
  
  <pre><code>@function color-set($name, $hex) {
      $submap: (hex: $hex);
  
      @for $o from 0 to 20 { // Going in increments of 5
          $percentage-decimal: $o*0.05;
          $percentage: $o*5;
          $submap: map-merge($submap, ($percentage: rgba($hex, $percentage-decimal)));
      }
  
      $colors: map-merge($colors, ($name: $submap));
      /* We should then have a map that looks like this:
      $colors: (colorname: (
      hex: #000000,
      0: rgba(0,0,0,0),
      5: rgba(0,0,0,.05),
      // and so on…
      100: rgba(0,0,0,1)
      )
      )
      … right? */
  }
  
  @function color-get($name, $opacity: hex) {
      @if $opacity != hex { // Returns RGBA value
          @return map-get(map-get($colors,$name), $opacity);
      }
      @else { // Returns hexidecimal value
          @return map-get(map-get($colors,$name), hex);
      }
  }
  </code></pre>
  
  <p>Please let me know if my functions are confusing! I'll try to comment them better.</p>
  
  <p>This is how I'm trying to define a colour (part of <code>_variables.scss</code>):</p>
  
  <pre><code>color-set(bkgrnd, $color--deep-ocean);
  </code></pre>
  
  <p>And here's how I'm trying to use my colours:</p>
  
  <pre><code>body { // These colours have been defined, too …supposedly
      background-color: color-get(bkgrnd, 80);
      color: color-get(white);
  }
  </code></pre>
  
  <p>Here is the error I get on _variables.scss:</p>
  
  <p><strong>Invalid CSS after "...ackground color": expected 1 selector or at-rule, was "color-set(bkgrnd, $"</strong></p>
  
  <p>So I feel like I'm missing something. I've had my head wrapped around this for four hours and I'm going mad. It's probably super simple stuff but I can't seem to figure it out. I use SASS casually, so I might not be aware of some syntax issue but if anyone has a clue about how to fix this, I'd be quite grateful.</p>
  
  <p>Have a nice day and thank you for taking the time to read my post!</p>
  
  <p>Regards,
  Chris</p>
  
  <p>PS: I compile this in Brackets with the Brackets SASS plugin, if ever that information is relevant.</p>