title: SASS dynamic variable names and nested loops throwing error
body: <p>I'm not totally sure if what I'm attempting is possible, but I've searched around as much as I can and build the following nested loop to create many variants of hex colors (rather than manually typing out the variable names).</p>
  
  <pre><code>$colors: (
      green: #006938,
      pink: #9d1e65,
      //...
  );
  
  $variations: (
      30%, 50%, 70%,
  );
  
  @each $hex, $name in $colors {
      @each $v in $variations {
          #{$name}-#{$v}: lighten($hex, $v);
      }
  }
  </code></pre>
  
  <p>However, I'm getting the following error on my second loop:</p>
  
  <pre><code>$ gulp sass
  [17:01:14] Using gulpfile ~/Sites/webcomponents/gulpfile.js
  [17:01:14] Starting 'sass'...
  
  events.js:163
        throw er; // Unhandled 'error' event
        ^
  Error: src/scss/app.scss
  Error: Invalid CSS after "...n $variations {": expected 1 selector or at-rule, was "#{$name}-#{$v}: lig"
          on line 72 of src/scss/app.scss
  &gt;&gt;     @each $v in $variations {
     -----------------------------^
  
      at options.error (/Users/martynbisset/Sites/webcomponents/node_modules/node-sass/lib/index.js:291:26)
  </code></pre>
  
  <p>Is this not the correct syntax for a nested loop? Also, when I try to do the variable name dynamically without the loop, I also get an error .. sorry, kinda two questions in one but would appreciate any advice on this as I'm quite a noob with SASS/SCSS.</p>
  
  <pre><code>$name: "Hello";
  $v: "70%";
  
  #{$name}-#{$v}: lighten($hex, $v); // throws error too :(
  </code></pre>