title: Create multiple text-shadow values using SASS/SCSS
body: <p>So I want to create a <code>text-shadow</code> effect with many different values, something like this:</p>
  
  <pre><code> .drop-shadow{
     text-shadow:
       1px 1px rgba(40,40,40,1)
       2px 2px rgba(40,40,40,.99)
       3px 3px rgba(40,40,40,.98)
       4px 4px rgba(40,40,40,.97)
       ...;
  }   
  </code></pre>
  
  <p>I have tried using SCSS to achieve this, but I'm not sure how to iterate over the value of a selector. For example, I tried: </p>
  
  <pre><code>.drop-shadow{
    @for $i from 1 through 100{
      $num: $i + px;
      $pct: $i / 100;
      $black: 1 - $pct;
      text-shadow: $num $num rgba( 40,40,40,$black );
    }
  }
  </code></pre>
  
  <p>But this just returns:</p>
  
  <pre><code>.drop-shadow{
    text-shadow: 1px 1px rgba(40,40,40,1);
    text-shadow: 2px 2px rgba(40,40,40,.99);
    text-shadow: 3px 3px rgba(40,40,40,.98);
    text-shadow: 4px 4px rgba(40,40,40,.97);
    ...;
  }
  </code></pre>
  
  <p>Where each subsequent <code>text-shadow</code> rule simply overrules the previous one. </p>
  
  <p>Is there any way to loop <em>inside</em> of the text-shadow rule?</p>