如何從Sass mixin輸出CSS計數器

Question

我正在寫一個mixin，我想輸出一個CSS計數器。這是我的目標：

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

這使得每三個元素，從第一個開始，綠色。 我想我的mixin採取第一個數字，在我的示例3並輸出CSS。這樣的事情：

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

這在Sass中可能嗎？

Answer 1

要在選擇器中使用變量的值，應該使用interpolation syntax #{}並將n附加到它，就像在下面的代碼塊中一樣。

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

以上代碼編譯成功和使用在線編譯器在sassmeister.com測試時產生所需的輸出。