title: Sass - SyntaxError: Not a valid CSS value
body: <p>This is my Sass file:</p>
  
  <pre><code>\:root
      @each $name, $color in $colors
          @if type-of($color) == "map"
              @each $subname, $subsize in $color
                  --color-#{$name}-#{$subname}: #{$subsize}
          @elseif type-of($color) == "number"
              --color-#{$name}: #{$color}
  </code></pre>
  
  <p><code>$colors</code> looks like this:</p>
  
  <pre><code>$colors: (
      accent: (
          darker: #2840d0,
          dark: #2d5ee8,
          base: #2d81e8,
          light: #76b8f0,
          lighter: #b6e1f9
      )
  );
  </code></pre>
  
  <p>Now this is the error I am getting:</p>
  
  <blockquote>
    <p>Sass::SyntaxError: (darker: #2840d0, dark: #2d5ee8, base: #2d81e8, light: #76b8f0, lighter: #b6e1f9) isn't a valid CSS value.</p>
  </blockquote>
  
  <p>It refers to <code>--color-#{$name}: #{$color}</code>.</p>