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変数。その周りに道があるかもしれないが、私はそれを回避しようとしたときに3つのグループを殺していた。あなたが好きな番号に（9から）ループで終わる変数を変更することができ、それが行動に3

のインクリメントグループを継続します：これは素晴らしい作品とは程遠い

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