Теперь проверим знания о циклах.

В испытании нужно сгенерировать правила для десяти ступенек (.stair-1 … stair-10) с помощью примеси generate-stairs, которую нужно вызывать рекурсивно.

Цвет отсчитывается от @base-color начиная с первой ступеньки и вычисляется с помощью функции spin в цикле. Шаг изменения цвета кратен 5. Кстати, шаг может быть отрицательным или положительным.

Ширина ступенек задаётся в процентах от ширины контейнера .stairs и кратна 10.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

@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);