css - 如何从 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);
}

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