1.

How Can You Create A Loop Structures In Less?

Answer»

A mixin can call itself in LESS. Such recursive MIXINS, when COMBINED with Pattern matching and Guard Expressions, can be used to create various iterative/loop structures.

Example:

.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); //
next ITERATION
WIDTH: (10px * @counter); // code for each
iteration
}
div {
.loop(5); // launch the loop
}
OUTPUT:
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}

A mixin can call itself in LESS. Such recursive mixins, when combined with Pattern matching and Guard Expressions, can be used to create various iterative/loop structures.

Example:

.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); //
next iteration
width: (10px * @counter); // code for each
iteration
}
div {
.loop(5); // launch the loop
}
Output:
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}


Discussion

No Comment Found

Related InterviewSolutions