通過SASS變量增加元素的訂單

Question

我正在尋找SASS中的最佳方法來迭代一個類的order以每4個項目上去1。我想出了以下結果，我想要的，但有很多也許不必要的標記。

@for $i from 1 through 3 { 
 
    &:nth-child(#{$i}) { 
 
    order: 3; 
 
    background: green; 
 
    } 
 
} 
 
@for $i from 4 through 6 { 
 
    &:nth-child(#{$i}) { 
 
    order: 1; 
 
    background: blue; 
 
    } 
 
} 
 
@for $i from 7 through 9 { 
 
    &:nth-child(#{$i}) { 
 
    order: 2; 
 
    background: red; 
 
    } 
 
}

Full Example of Code Working on Codepen

有沒有更好的方式來做到這一點，我很想念？

Answer 1

這將做你所要求的一個單一的循環和一些數學。有可能是一個更有效的方式，但是這是我能想出：

.box { 
    @for $i from 0 through 9 { 
    $c : $i + 1; 
    &:nth-child(#{$c}) { 
     order: (($i - $i % 3)/3) + 1; 
    } 
    } 
} 

輸出：

.box:nth-child(1) { order: 1; } 
.box:nth-child(2) { order: 1; } 
.box:nth-child(3) { order: 1; } 
.box:nth-child(4) { order: 2; } 
.box:nth-child(5) { order: 2; } 
.box:nth-child(6) { order: 2; } 
.box:nth-child(7) { order: 3; } 
.box:nth-child(8) { order: 3; } 
.box:nth-child(9) { order: 3; } 
.box:nth-child(10) { order: 4; } 

需要注意的是櫃檯上以零開始，這就是爲什麼我需要使用$ c變量。可能會有解決辦法，但當我試圖繞過它時，它正在殺死三個小組。您可以在環（9），以任何你想要的號碼更改結束變量，它會繼續3.

遞增組在行動：

http://www.sassmeister.com/gist/6506fa7b74b2341539b1373d943cb9cc