Sass mixinからCSSカウンタを出力するには

Question

CSSカウンタを出力したいというミックスインを書いています。ここに私のゴールがあります：

.selector:nth-child(3n+1) { 
    color: green; 
} 

これは、最初のものから3つの要素をすべて緑色にします。 私のmixinが最初の数字をとって、私の例では3とし、CSSを出力したいと思います。このようなもの：

@mixin counter($number) { 
    &:nth-child($number * n + 1) { 
    color: green; 
    } 
} 

この時点でこれが可能ですか？

Answer 1

セレクタで変数の値を使用するには、interpolation syntax #{}を使用し、nを次のコードブロックのように追加する必要があります。

@mixin counter($number) { 
    &:nth-child(#{$number}n + 1) { 
    color: green; 
    } 
} 
.selector{ 
    @include counter(3); 
} 

上記のコードは正常にコンパイルおよびsassmeister.comオンラインでコンパイラを使用して試験した場合に必要な出力を生成します。