title: SCSS compilation is throwing a syntax error isn't a valid CSS value
body: <p>I've a color palette scss file with a couple of functions, one to get a color and another to get the color but with an opacity. The compilation of that file doesn't throw any error but when I'm going to use the funtion for the opacity, I got an error <code>(&quot;dark&quot;: 0.1, &quot;light&quot;: 0.8) isn't a valid CSS value</code> and I don't know why.</p>
  <pre><code>$my-colors: (
    'default-blue': #0071ce,
    'blue': #064f8e,
    'yellow': #f79428,
    'light-blue': #1888c8,
    'green': #54a546,
    'red': #C82022,
    'pink': #b51e6d,
    'orange': #e54e26
  );
  
  $my-opacity: (
    'dark': 1,
    'light': 0.8
  );
  
  @function get-color($key: 'default-blue') {
    @return map-get($my-colors, $key);
  }
  
  @function get-color-alpha($name: 'default-blue', $opacity: 'dark') {
    $color: get-color($name);
    // Get the named opacity level, if it exists
    @if map-key-exists($my-opacity, $opacity) {
      $opacity: map-get($my-opacity, $opacity);
    }
  
    // Use rgba() to manipulate the color's alpha level
    @return rgba($color, $opacity);
  }
  </code></pre>
  <p>I'm using the function like this:</p>
  <pre><code>li h3 {
      color: get-color-alpha('default-blue', 'light');
  }
  </code></pre>