Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

garrypolley commented Jan 17, 2014

Thanks for this gist!

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

@mizhon

This comment has been minimized.

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
You can’t perform that action at this time.