Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save juliozuppa/cf0285f61e8ca0769749b591d9975932 to your computer and use it in GitHub Desktop.
Save juliozuppa/cf0285f61e8ca0769749b591d9975932 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;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment