title: Create CSS custom properties from SCSS variables
body: <p>I have an SCSS map of colour names and values.  I want to create CSS custom properties from them like so:</p>
  
  <p><strong>SCSS</strong></p>
  
  <pre class="lang-scss prettyprint-override"><code>$colours:(
    "gray-500":    #f7fafc,
    "red-500":     #f56565,
    "green-500":   #48bb78
  );
  </code></pre>
  
  <p><strong>Desired resultant CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>--gray-500:  #f7fafc;
  --red-500:   #f56565;
  --green-500: #48bb78;
  </code></pre>
  
  <p>I know how to loop through the map, but where I'm getting caught up is how to use the key as a custom property name, and how to prepend <code>--</code> to it.  All the examples I can find related to this topic involve manually typing out the custom property name - not gleaning it from the key of a map.</p>
  
  <p>This is what I have so far:</p>
  
  <pre class="lang-scss prettyprint-override"><code>@each $colour, $value in $colours {
      --#{$colour}:$value;
  }
  </code></pre>
  
  <p>That generates an error: <code>expected "{"</code> with the caret pointing to the end of this line:</p>
  
  <pre class="lang-scss prettyprint-override"><code>--#{$colour}:$value;
  </code></pre>
  
  <p>I'm using Dart Sass 1.23.7</p>