title: SCSS / SASS : How to create variables inside an each loop
body: <p>In my <strong>SASS</strong> code I have an array with all my colours, then I made an each loop to create css variables from these colours, and finally I would like to do another loop to create each sass variables of these css colours... Let me show you :</p>
  
  <pre class="lang-css prettyprint-override"><code>/************************************************************
  **********************   COULEURS   *************************
  ************************************************************/
  $colors : (
      "pink"     : #E20071,
      "blue"     : #00A3DA,
      "gray"     : #939394,
      "darkGray" : #939394,
      "yellow"   : #FEA347,
      "green"    : #4CA66B,
      "white"    : #FFFFFF,
      "black"    : #1B1B1B,
  );
  
  :root{
      @each $key, $value in $colors {
          --#{$key} : #{$value};
      }
  }
  
  $pink     : var(--pink);
  $blue     : var(--blue);
  $gray     : var(--gray);
  $yellow   : var(--yellow);
  $green    : var(--green);
  $white    : var(--white);
  $black    : var(--black);
  $darkGray : var(--darkGray);
  </code></pre>
  
  <p>So I tried something like this : </p>
  
  <pre><code>@each $key, $value in $colors {
      $#{$key} : var(--#{$key});
  }
  </code></pre>
  
  <p>But it gives me an error : <code>Invalid CSS after "...ue in $colors {": expected 1 selector or at-rule, was "$#{$key} : var(--#{" in /home/simon/Documents/HL3/URSELF/app/src/variables.scss (line 28, column 32)</code></p>
  
  <p>So my question is <strong>is it possible to achieve something like this?</strong>; it will really helpfull to create variables, If I want to remove / add one, I just have to do it in the array and then all the code update itself...</p>