ekfuhrmann ekfuhrmann - 2 months ago 9
Sass (Sass) Question

Increase element's order through a SASS variable

I'm looking for the best method in SASS to iterate a class's

order
to go up
1
every 4 item. I came up with the following that gets the result I wanted, but comes with a lot of perhaps unnecessary markup.



@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

Is there a better way to do this that I am missing?

Answer

This will do what you're asking with a single loop and some math. There's probably an even more efficient way, but this is what I could come up with:

.box {
  @for $i from 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 that counter starts with zero, which is why I needed to use the $c variable. There might be a way around that but it was killing the groups of threes when I tried to get around it. You can change the ending variable in the loop (from 9) to whatever number you want and it will continue incrementing groups of 3.

In Action:

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

Comments