Вопрос! Испытание: разноцветные ступеньки [21/30]

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

Добрый день. Объясните, пожалуйста, как в данном примере работает знак “+” в рекурсии .generate-stairs (@n + 1); и знак"-" generate-stairs (@n - 1); Когда ставить плюс, когда минус? Как происходит подсчёт?

Первый пример:
@base-color: #ff4136;

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

**.generate-stairs (@n + 1);**

}
.generate-stairs(1);

Второй пример:
@base-color: #ff4136;

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

.generate-stairs (@n - 1);

}
.generate-stairs(10);

2

Знаки “+” и “-” работают, как обычные арифметические операторы. Во время вызова .generate-stairs(1) или .generate-stairs(10) в качестве параметра @n выступает число в скобках. В итоге получаются вложенные вызовы примесей:

.generate-stairs(1) {
  ... /* какие-то операции*/
  .generate-stairs(2) {
    ... /* какие-то операции*/
    .generate-stairs(3) {
      ... /* какие-то операции*/
      .generate-stairs(n) { } /* и т.д.*/
      }
    }
  }
}

Важно иметь условие остановки рекурсии, чтобы не возник бесконечный вызов.

1 лайк
3

Разница в условии.
Если .generate-stairs(@n) when (@n <= 10), то начальное значение @n равно 1 и на каждом следующем круге увеличивается на единицу.
Если .generate-stairs(@n) when (@n > 0), то начальное значение равно 10 и расчет идет в обратную сторону, то есть значение @n на каждом следующем круге цикла уменьшается.