Scss mixin 忽略@if 语句

Question

我正在进行一项评估，要求我仅使用 css 将内容呈现到带有空白标签的 html 文件。我创建了一个 mixin，它使用计数器增量属性对文档中的所有 li 元素进行编号。我正在尝试用 'fizz' 替换每第 3 个 li，但我似乎无法创建一个有效的 if 语句。这是我拥有的：

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

Answer 1

您的目标似乎是 ul:nth-child 而不是 ul li:nth-child。还应该使用 &:before 而不仅仅是 :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;
        }
      }
    }
  }
}

Scss mixin 忽略@if 语句

Scss mixin ignoring @if statement

html

sass

scss-mixins