Less — Урок 13. Циклы

Привет! В Less нет синтаксиса для циклов, но их можно сымитировать с помощью рекурсии.
Рекурсия – это когда вызывается функция или миксин из самой себя.

В Less для рекурсии можно использовать миксины.

Создаем класс test, в котором используем миксин loop с передаваемым значением (5):

.test {
  .loop(5); // миксин
}

Теперь напишем сам миксин.
Задаем условие when, чтобы цикл не был бесконечным и укажем, что loop должен выполняться, пока его значение больше 0:

.loop(@i) when (@i > 0) {
  width: @i * 10;
  .loop(@i - 1); // рекурсия
}

В результате получаем значение width от 10 до 50px:

А теперь на приближенном к жизни примере ещё раз отработаем цикл.
Пусть это будет сетка Bootstrap, для которой требуется вычислять значения всех col-*-*.

Чтобы не прописывать вручную все 12 элементов grid, нам потребуется цикл.

Первым делом создаем миксин .generateBootstrap с передаваемым значением @n и переменной @i, по умолчанию равной 1 и необходимой для инициализации рекурсии.

Добавим условие when в миксин, чтобы цикл не был бесконечным и переменная @i должна быть меньше или равна передаваемому значению @n.

Далее воспользуемся шаблонизатором, т.е. создаем сетку бутстрап .col-xs-@{i} // в @ передается значение @i

.generateBootstrap(@n, @i: 1) when (@i =< @n) {
  .col-xs-@{i} {
    width: ((@i * 100%) / @n);
  }
  .generateBootstrap(@n, @i + 1);
}

.generateBootstrap(12);

И вот такую сетку получаем на выходе в bundle.min.css:

Давай доведем до совершенства шаблонизатор и добавим переменную @name для получения бутстраповских xs, sm, md, lg наименований классов:

.generateBootstrap(@n, @name, @i: 1) when (@i =< @n) {
  .col-@{name}-@{i} {
    width: ((@i * 100%) / @n);
  }
  .generateBootstrap(@n, @name, @i + 1);
}

.generateBootstrap(12, xs);
.generateBootstrap(12, sm);
.generateBootstrap(12, md);
.generateBootstrap(12, lg);

Получаем всю сетку от col-xs-1 до col-lg-12:

Вот так создаются циклы в Less и могут использоваться на практике, например, для генерации grid Bootstrap.

При написании статьи использовались материалы WebForMySelf.com

Это всё, пока!