Implementing loops in LESS
Published
This article looks at how to implement for loops in LESS, which is harder than it would seem unfortunately.
The LESS pre-processor doesn’t actually have a for loop, or even a while loop. Instead it has the ability to simulate them with a feature called guard expressions, which is a mixin that will only execute if a given condition passes.
.optional-style(@switch) when (@switch) {
color: black;
}
button {
/* Add optional styles */
@switch: true;
.optional-style(@switch);
}
li {
/* Don't add optional styles */
@switch: false;
.optional-style(@switch);
}
A for loop can be simulated by using a guard expression that calls itself with the loop index decremented.
.my-loop(@i) when (@i > 0) {
.my-loop(@i - 1);
li:nth-child(@{i}) {
color:red;
}
}
/* Run the loop */
.my-loop(5);
/* Produces li:nth-child(1) ... li:nth-child(5) */
To reverse the order in which the loop is evaluated, place the recursive call at the other end of the guard expression.
.my-loop(@i) when (@i > 0) {
li:nth-child(@{i}) {
color:red;
}
.my-loop(@i - 1);
}
/* Run the loop */
.my-loop(5);
/* Produces li:nth-child(5) ... li:nth-child(1) */
