How do I create nested loops with LESS CSS?

When using LESS CSS, we can leverage LESS's Mixins feature to simulate loop-like structures, enabling complex style reuse and nested recursive patterns. However, it's important to note that LESS does not have native loop syntax; instead, it simulates loops through recursion. I will now provide an example to illustrate how to create nested loops using LESS.

Example: Creating a Grid System

Suppose we need to create a simple responsive grid system; we can achieve this using LESS's nesting and Mixins features. We will create two layers of nesting, with the outer recursive call generating different grid containers and the inner recursive call generating the grid columns.

less
// Define the mixin for generating columns
.generate-columns(@n, @i: 1) when (@i <= @n) {
    .col-@{i} {
        width: (100% / @n) * @i;
    }
    .generate-columns(@n, (@i + 1));
}

// Define the mixin for generating the grid
.generate-grid(@rows, @cols, @row-index: 1) when (@row-index <= @rows) {
    .row-@{row-index} {
        .generate-columns(@cols);
    }
    .generate-grid(@rows, @cols, (@row-index + 1));
}

// Use the mixins to generate a 3-row, 12-column grid system
.generate-grid(3, 12);

Analysis:

1. generate-columns Mixin: This mixin takes two parameters: @n for the total number of columns and @i for the current column index (defaulting to 1). It recursively generates the width styles for each column until @i exceeds @n.

2. generate-grid Mixin: This mixin is responsible for generating the entire grid system. @rows is the number of rows, @cols is the number of columns, and @row-index is the current row index (defaulting to 1). For each row, it calls the generate-columns mixin to generate the columns. It then recursively calls generate-grid until all rows are created.

Result:

This LESS code will generate the following CSS:

css
.row-1 .col-1 { width: 8.33333%; }
.row-1 .col-2 { width: 16.66667%; }
...
.row-1 .col-12 { width: 100%; }
.row-2 .col-1 { width: 8.33333%; }
.row-2 .col-2 { width: 16.66667%; }
...
.row-2 .col-12 { width: 100%; }
.row-3 .col-1 { width: 8.33333%; }
...
.row-3 .col-12 { width: 100%; }

This example demonstrates how to create nested recursive structures using LESS's Mixins to implement a simple grid layout system. This approach enables highly flexible and dynamic control over styles, especially beneficial for complex styling system designs.