Scss mixin ignoring @if statement-CodePudding

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:

Html

<html lang="en">

<head>
  <title>FizzBuzz</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

</html>

SCSS

@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;
}

CodePudding user response：

Looks like you're targeting ul:nth-child instead of ul li:nth-child. Also should be using &:before instead of just :before.

@mixin render {
  @for $i from 1 through 16 {
    ul li:nth-child(#{$i}) {
      order: #{$i};
      
      &:before {
        @if $i % 3 == 0 {
          content: 'fizz';
          counter-increment: number-counter;
        } @else {
          content: counter(number-counter);
          counter-increment: number-counter;
        }
      }
    }
  }
}