Создание закольцовываний в LESS
Как известно, в Less примеси могут вызывать сами себя. Что из этого следует?
В сочетании с такими функциями как Выражения сдерживателя и Копирование шаблона, такие рекурсивные примеси могут использоваться для создания различных повторяющихся и зацикленных структур.
Например:
.loop(@counter) when (@counter > 0) {
// следующая итерация:
.loop((@counter - 1));
// код для каждой итерации:
width: (10px * @counter);
}
div {
.loop(5); // запустить цикл
}
Получим CSS код:
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
Общий пример использования рекурсивных закольцовываний, чтобы создать классы для CSS сетки:
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
Получим CSS код:
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}