title: SCSS nth-child in for loop?
body: <p>I was trying to create a loop to create a number of nth-child selectors with matching content:</p>
  
  <pre><code>$show-numbers: true;
  
  @if $show-numbers {
    @for $i from 1 through 5 {
      &amp;:nth-child(1) {
        &amp;:before {
          content: '#{$i}';
        }
      }
    }
  }
  </code></pre>
  
  <p>This, of course, makes 5 copies of </p>
  
  <pre><code>ul.checkout-bar li:nth-child(1):before {
     content: "1";
  }
  </code></pre>
  
  <p>with the "content" correctly incremented.  But I cannot get the nth-child value to increment.  Is this not possible in Sass?</p>
  
  <p><strong>NOTE</strong> a <em>static</em> variable can be interpolated:</p>
  
  <pre><code>$foo: 1;
      &amp;:nth-child(#{$foo}) {
        &amp;:before {
          content: '1';
        }
      }
  </code></pre>
  
  <p>This works fine.  It's the first thing I tried.</p>
  
  <p>However, when using the <code>$i</code> in the <code>for</code> loop, it does not work.</p>