Less — Урок 13. Циклы
17.08.2019
929
Привет! В 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:
рекурсия в Less
А теперь на приближенном к жизни примере ещё раз отработаем цикл.
Пусть это будет сетка Bootstrap, для которой требуется вычислять значения всех col-*-*.
grid Bootstrap
Чтобы не прописывать вручную все 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:
my Bootstrap
Давай доведем до совершенства шаблонизатор и добавим переменную @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:
my grid Bootstrap
Вот так создаются циклы в Less и могут использоваться на практике, например, для генерации grid Bootstrap.
При написании статьи использовались материалы WebForMySelf.com
Это всё, пока!
Голосов: 2, Средняя оценка: 5