variables - 创建 Sass mixin 时，我可以在 :nth-child 声明中使用变量吗？

Question

这是我编写的 mixin（.scss 格式），但出现此错误：

“($x)”之后的无效 CSS：预期的表达式（例如 1px，粗体），是“{”

@mixin x_cards_wide($x) {
  .card {
    &:nth-child(-n + $x) { margin-top:   0; }
    &:nth-child($x *  n) { margin-right: 0; }
  }
}

在CodePen上查看

Answer 1

您可以使用插值来完成此操作：

@mixin x_cards_wide($x) {
  .card {
    &:nth-child(-n+#{$x}) { margin-top: 0; }
    &:nth-child(#{$x}n) { margin-right: 0; }
  }
}