- Теория
- Теория
Цикл
В 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
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.