Тема : Цикл в LESS.

Курсы §37. Примеси в LESS
1

Неужели все сразу, все так хорошо поняли? 6-й раз разбираю теорию, что дана в последних двух упражнениях. Совершенно понять не могу, как работает рекурсия.

Ну вот как дойти до этого кода самостоятельно?

.generate-stairs(@n) when (@n <= 10) {
.stair-@{n} {
background-color: spin(@base-color, -25*@n);
width: @n *10%;
}
.generate-stairs(@n + 1);
}

Откуда берется .generate, как понять, что именно меньше равно 10, -25*@n, .generate-stairs(@n + 1);
Как все это работает?
Не хочу показаться глупым. Не хотите объяснять, подскажите конкретный ресурс пожалуйста, благодаря которому смогу понять и разобраться.
Люто требую помощи. Спасибо!

2

Пример работы цикла с генерацией цвета вы могли увидеть на предыдущем шаге: https://htmlacademy.ru/courses/125/run/20

Название для цикла могло быть любым. Не обязательно generate-stairs. Это название вам просто подсказали.

Изначально в цикле было другое условие: n > 0. Всего у вас 10 ступенек. Предполагалось, что вы пройдетесь по ним снизу вверх. В вашем варианте получается сверху вниз. Но общий смысл от этого не меняется.

Значение -25 подобрано на основании подсказки в теории о кратности пяти и о возможной его отрицательности.
@n - это переменная-счетчик. Вызывая примесь рекурсивно (то есть внутри себя самой) вы увеличиваете счетчик на единицу на каждом следующем уровне итерации.

Чтобы лучше понять работу циклов, вы можете почитать о циклах в JS. Синтаксис немного другой, но смысл работы тот же.

3

Туман рассеивается. Спасибо, буду разбираться.

4

@base-color: #ff4136;

.generate-stairs(@n) when (@n > 0) {
.stair-@{n} {
background-color: spin(@base-color, @n * -25);
width: 10% * @n;
}

.generate-stairs(@n - 1);
}

.generate-stairs(10);