title: Sass CSS Gradient Generator
body: <p>Take a look at this JSFiddle</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/JamesKyle/wLkLE/2/" rel="nofollow">http://jsfiddle.net/JamesKyle/wLkLE/2/</a></p>
  </blockquote>
  
  <p>Trying to recreate this look <a href="http://jsfiddle.net/JamesKyle/EyxHE/3/" rel="nofollow">http://jsfiddle.net/JamesKyle/EyxHE/3/</a> with SASS so that it can easily be modified. </p>
  
  <p>This is the code that I'm having trouble with... </p>
  
  <pre><code>@for $i from 1 through $numberOfUnits {
    if $i == 1 {
      $lineargradient: $majorColor 0%, $majorColor $majorWidthPercent, $gapColor $majorWidthPercent, $gapColor $unitWidthPercent
    }
    else if $i &gt; 1 {
      $minor-begin: ($i-1)*$unitWidthPercent;
      $minor-end: (($i-1)*$unitWidthPercent)+$minorWidthPercent;
      $gap-begin: $minor-end;
      $gap-end: $i*$unitWidthPercent;
  
      $lineargradient: #{$lineargradient}, $minorColor $minor-begin, $minorColor $minor-end, $gapColor $gap-begin, $gapColor $gap-end;
    }
  }​
  </code></pre>
  
  <p>I'm not sure how to code this to make it output: </p>
  
  <pre><code>$lineargradient: rgba(0,0,0,0.15)...
  </code></pre>
  
  <p>The <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variables_" rel="nofollow">SASS documentation</a> isn't very clear on how to do something like this</p>
  
  <p>Again you can see this in JSFiddle form here:</p>
  
  <blockquote>
    <blockquote>
      <p><a href="http://jsfiddle.net/JamesKyle/wLkLE/2/" rel="nofollow">http://jsfiddle.net/JamesKyle/wLkLE/2/</a></p>
    </blockquote>
  </blockquote>