title: Use SASS to dynamically add color stops to linear-gradient
body: <p>Using SASS, I am trying to create a dynamic linear-gradient, so if I have an array of colors, I would like to loop through it and add each color to the gradient.</p>
  
  <pre><code>@import "compass";
  
  $colors: red green blue;
  $numColors: length($colors);
  
  div {
    $g: nth($colors, 1);
    @for $h from 2 to ($numColors + 1) {
      $g: $g , nth($colors, $h);
    }
    border: $g;
    background: linear-gradient($g);
  }
  </code></pre>
  
  <p>This results in the following error</p>
  
  <pre><code>At least two color stops are required for a linear-gradient
  </code></pre>
  
  <p>Removing the background parameter will compile, and looks like this</p>
  
  <pre><code>border: red, green, blue;
  </code></pre>
  
  <p>(I know that's not a valid border, I just wanted to "trace" out $g)</p>
  
  <p>How can I dynamically iterate through an array and create a linear gradient?</p>