Списки и циклы

В Less нет @for и @each, как в Sass. Повторение делается двумя способами: рекурсивным миксином, который вызывает сам себя, и функцией each(). Циклы нужны, чтобы получить десятки служебных классов из одного списка значений.

Списки

Список — это значения через запятую или пробел в одной переменной. Для работы с ним есть функции (в примерах @list: 4px, 8px, 16px):

// styles/main.less
@sizes: 12px, 16px, 20px;
 
.text-small {
  font-size: extract(@sizes, 1);
}
 
.text-large {
  font-size: extract(@sizes, length(@sizes));
}

.text-small {
  font-size: 12px;
}
.text-large {
  font-size: 20px;
}

Рекурсивный миксин

Миксин с охранным выражением вызывает себя с меньшим числом, пока условие истинно. Так создаются колонки сетки:

// styles/main.less
.make-columns(@i) when (@i > 0) {
  .col-@{i} {
    width: percentage((@i / 4));
  }
  .make-columns(@i - 1);
}
 
.make-columns(4);

.col-4 {
  width: 100%;
}
.col-3 {
  width: 75%;
}
.col-2 {
  width: 50%;
}
.col-1 {
  width: 25%;
}

Вызов .make-columns(4) вывел .col-4, затем вызвал .make-columns(3) и так до нуля, где условие @i > 0 ложно и рекурсия остановилась.

Функция each

each() проще: она перебирает список и для каждого элемента выполняет набор правил. Внутри доступны @value — значение, @key — ключ и @index — номер с 1:

// styles/main.less
@spacers: 4px, 8px, 16px;
 
each(@spacers, {
  .mt-@{index} {
    margin-top: @value;
  }
});

.mt-1 {
  margin-top: 4px;
}
.mt-2 {
  margin-top: 8px;
}
.mt-3 {
  margin-top: 16px;
}

Перебор карты

С картой each() даёт ключ и значение — удобно для цветовых классов:

// styles/main.less
@colors: {
  primary: #2563eb;
  success: #16a34a;
  danger: #dc2626;
}
 
each(@colors, {
  .text-@{key} {
    color: @value;
  }
});

.text-primary {
  color: #2563eb;
}
.text-success {
  color: #16a34a;
}
.text-danger {
  color: #dc2626;
}

<style>
  .text-primary {
    color: #2563eb;
  }
  .text-success {
    color: #16a34a;
  }
  .text-danger {
    color: #dc2626;
  }
</style>
 
<p class="text-primary">Новый пост</p>
<p class="text-success">Пост опубликован</p>
<p class="text-danger">Ошибка сохранения</p>

Частая ошибка

Рекурсивный миксин без охранного выражения или без уменьшения счётчика никогда не останавливается:

// styles/main.less
.make-columns(@i) {
  .col-@{i} {
    width: percentage((@i / 4));
  }
  .make-columns(@i - 1);
}
 
.make-columns(4);

Less уходит в бесконечную рекурсию, и компиляция падает с малопонятной ошибкой SyntaxError: undefined на строке вызова. Всегда пишите when (@i > 0) и вызывайте миксин с @i - 1.