如何从Sass mixin输出CSS计数器

Question

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

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

上面的代码在sassmeister.com使用在线编译器测试时成功编译并生成所需的输出。