如何从 Sass mixin 输出 CSS 计数器

Question

我正在编写一个 mixin，我想输出一个 CSS 计数器。这是我的目标：

.selector:nth-child(3n+1) {
  color: green;
}

从第一个开始，每三个元素都是绿色的。我希望我的 mixin 获取第一个数字，在我的示例中 3 并输出 CSS。像这样：

@mixin counter($number) {
  &:nth-child($number * n + 1) {
    color: green;
  }
}

此时 Sass 这可能吗？

Answer 1

要在选择器中使用变量值，您应该使用 interpolation syntax #{} 并像下面的代码块一样在其后附加 n。

@mixin counter($number) {
  &:nth-child(#{$number}n + 1) {
    color: green;
  }
}
.selector{
  @include counter(3);
}

使用在线编译器测试时，以上代码编译成功并产生所需的输出

How to output CSS counter from Sass mixin