忽略@if语句的Scss mixin答案

【问题标题】：Scss mixin ignoring @if statement忽略@if语句的Scss mixin
【发布时间】：2021-11-23 09:01:00
【问题描述】：

我正在进行一项评估，要求我仅使用 css 将内容呈现到带有空白标签的 html 文件。我创建了一个 mixin，它使用 counter-increment 属性对文档中的所有 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;
}

【问题讨论】：

其他问题：我假设您的目标是第 n 个li，ul 的孩子。 ul:nth-child 表示“最后一个ul 在其父级中。所以li:nth-child 应该会更好。

标签： html sass scss-mixins

【解决方案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;
        }
      }
    }
  }
}

【讨论】：

嗨！寻找帖子，我喜欢学习新事物 :) 但是，您的 sn-p 没有显示任何内容。请把html部分整合进去，让我们看看和鼓掌好吗？ :)
@Philippe Stack Overflow 编辑器我相信不支持 SCSS/SASS 渲染，所以在 Codepen 中进行设置，您将能够看到结果
在 Codepen 上运行良好。恭喜！