Skip to content

Instantly share code, notes, and snippets.

@edwinwebb
Last active February 1, 2019 15:39
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save edwinwebb/5155504 to your computer and use it in GitHub Desktop.
Save edwinwebb/5155504 to your computer and use it in GitHub Desktop.
A simple less loop with comments and simple from, to syntax.
/* Define two variables as the loop limits */
@from : 0;
@to : 10;
/* Create a Parametric mixin and add a guard operation */
.loop(@index) when(@index =< @to) {
/* As the mixin is called CSS is outputted */
div:nth-child(@{index}) {
top: unit(@index * 100, px);
}
/* Interation call and operation */
.loop(@index + 1);
}
/* the mixin is called, css outputted and iterations called */
.loop(@from);
/*
## Output
div:nth-child(0) {
top: 0px;
}
div:nth-child(1) {
top: 100px;
}
div:nth-child(2) {
top: 200px;
}
div:nth-child(3) {
top: 300px;
}
div:nth-child(4) {
top: 400px;
}
div:nth-child(5) {
top: 500px;
}
div:nth-child(6) {
top: 600px;
}
div:nth-child(7) {
top: 700px;
}
div:nth-child(8) {
top: 800px;
}
div:nth-child(9) {
top: 900px;
}
div:nth-child(10) {
top: 1000px;
}
*/
@garrypolley
Copy link

Thanks for this gist!

Really helped me out in create a layout generate without a bunch of repeat code.

@mizhon
Copy link

mizhon commented Feb 1, 2019

Great example for me, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment