# Implementing loops in LESS

Published
Tags:

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 {
@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) */