title: Scss mixin ignoring @if statement
body: <p>I am doing an assessment where I'm asked to render content to an html file with blank tags using only css.  I created a mixin that uses the counter-increment property to number all li elements in the document.  I am trying to replace every 3rd li with 'fizz' but I can't seem to create an if statement that works.  Here's what I have:</p>
  <p>Html</p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
    &lt;title&gt;FizzBuzz&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot; /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>SCSS</p>
  <pre><code>@mixin render {
    @for $i from 1 through 16 {
      ul:nth-child(#{$i}) {
        :before {
          @if $i % 3 == 0 {
            content: 'fizz';
            counter-increment: number-counter;
          } @else {
            content: counter(number-counter);
            counter-increment: number-counter;
          }
        }
      }
    }
  }
  
  body {
    counter-reset: number-counter 0;
    @include render();
  }
  
  li {
    list-style-type: none;
  }
  </code></pre>