title: Sass each function is compiling with dollar sign in front of it
body: <p>I'm trying to use an each loop in Sass but the css is compiling with the variable name instead of the content of the variable.</p>
  
  <pre><code>$green-1: #9ae200;
  $green-2: #5ea600;
  $color-list: green-1 green-2;
  
  @each $single-color in $color-list {
      &amp;.#{$single-color} {
          background-color: $single-color;
      }
  }
  </code></pre>
  
  <p>The output I am looking for is:</p>
  
  <pre><code>.green-1 {
      background-color:#9ae200;
  }
  .green-2 {
      background-color:#5ea600;
  }
  </code></pre>
  
  <p>But the css is compiling as:</p>
  
  <pre><code>.green-1 {
      background-color:green-1;
  }
  .green-2 {
      background-color:green-2;
  }
  </code></pre>
  
  <p>So to try to get the dollar sign in there I tried this:</p>
  
  <pre><code>@each $single-color in $color-list {
      @function create-variable($variable){
          @return "$" + $variable;
      }
  
      &amp;.#{$single-color} {
          background-color: create-variable($single-color);
      }
  }
  </code></pre>
  
  <p>But that compiled as:</p>
  
  <pre><code>.green-1 {
      background-color:$green-1;
  }
  .green-2 {
      background-color:$green-2;
  }
  </code></pre>
  
  <p>Sass is not reading the variables for some reason and is taking them literally. Anyone know how to make this work?</p>