Skip to content

Instantly share code, notes, and snippets.

@treetop1500
Last active September 22, 2016 19:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save treetop1500/6506fa7b74b2341539b1373d943cb9cc to your computer and use it in GitHub Desktop.
Save treetop1500/6506fa7b74b2341539b1373d943cb9cc to your computer and use it in GitHub Desktop.
Looping sass and incrementing by 3
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
.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; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment