Испытание:разноцветные ступеньки. 100%

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

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

2

Можно так: width: @n * 10%;

3 
@base-color: #ff4136; 

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

.generate-stairs(1);
1 лайк
4 
@base-color: #ff4136;
@width: 10%;

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

.generate-stairs(10);
5

@base-color: #ff4136;
@width: 10%;

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

.generate-width(@n) when (@n > 0) {
.stair-@{n} {
width: @width * @n}
.generate-width(@n - 1);
}
.generate-width(10);
100%

6

У кого, не получается, обратите внимание, что здесь между “@n” и “-” и "1"ставятся пробелы! Без них код не будет работать. (@n - 1)

7

У меня получилось так. Только не очень понял, почему -25??? Если в задании, шаг кратен 5??

image
image722×296 12.9 KB

8

@base-color: #ff4136;

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

}

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

.generate-stairs(10);

9

@base-color: #ff4136;

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

.generate-stairs(10);