variables - 创建 Sass mixin 时，我可以使用 :nth-child declaration? 中的变量吗

Question

这是我写的 mixin(.scss 格式)，但我收到了这个错误:

Invalid CSS after "($x) ": expected expression (e.g. 1px, bold), was "{"

@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; }
  }
}