variables - Sassミックスインを作成するときに、：nth-​​child宣言内で変数を使用できますか？

Question

これは私が書いたミックスイン（.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; }
  }
}