在创建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

您可以使用interpolations完成此操作：

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