css - Increase element's order through a SASS variable -

i'm looking best method in sass iterate class's order go 1 every 4 item. came following gets result wanted, comes lot of perhaps unnecessary markup.

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

full example of code working on codepen

is there better way missing?

this you're asking single loop , math. there's more efficient way, come with:

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

outputs:

.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; } 

note counter starts zero, why needed use $c variable. there might way around killing groups of threes when tried around it. can change ending variable in loop (from 9) whatever number want , continue incrementing groups of 3.

in action:

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