• Теория
  • Теория

Цикл

В Less нет специального синтаксиса для циклов. Но есть возможность вызывать примеси внутри самих себя. Так с помощью рекурсии и реализуются циклы. Рассмотрим пример:

Less.mixin(@n) {
  .mixin(@n + 1);
}

.mixin(1);

В примере создаётся «бесконечный» цикл с увеличивающейся переменной-счётчиком, который никогда не закончится. Чтобы рекурсия всё-таки когда-нибудь прекращалась, к примеси добавляется условие выполнения:

Less.mixin(@n) when (@n > 0) {
   .mixin(@n - 1);
}

.mixin(2);

Теперь цикл выполнится два раза, сработает условие выполнения примеси и произойдёт выход из рекурсии.

Для чего можно применять циклы? Например, для генерирования целых CSS-правил. Если в цикле в имени селектора использовать переменную-вставку из прошлого задания, то можно на выходе получить набор правил с разными селекторами. В примере ниже цикл исполняется три раза, в каждой итерации создастся правило с переменной-счётчиком @n в качестве суффикса селектора:

Less.mixin(@n) when (@n > 0) {
  .text-@{n} {
  }

  .mixin(@n - 1);
}

.mixin(3);
CSS.text-3 {}
.text-2 {}
.text-1 {}

Опробуем циклы на практике.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Примеси в Less» тренажёра «Инструменты автоматизации: препроцессор» можно после регистрации и оформления подписки.