Html z指数从高到低的递减率较小

我发现这个

Less

循环可以生成增量值：

@iterations: 10;

.loopingClass (@index) when (@index > 0) {
    .item-panel:nth-child(@{index}) {
        position: relative;
        z-index: @index;
    }
    .loopingClass(@index - 1);
}
.loopingClass (@iterations);

但是我怎样才能将上面的值转换为递减值呢？（即反过来）

---

非常感谢

将

z-index

属性的值更改为

@iterations-@index+1

，作为旁注，为了防止在每个伪类中重复

位置：relative

，只需将该属性移出循环即可

@iterations: 10;

.item-panel {
  position: relative;
}

.loopingClass (@index) when (@index > 0) {
    .item-panel:nth-child(@{index}) {
        z-index: @iterations - @index + 1;
    }
    .loopingClass(@index - 1);
}
.loopingClass (@iterations);

---

编译输出

.item-panel {
  position: relative;
}

.item-panel:nth-child(10) {
  z-index: 1;
}
.item-panel:nth-child(9) {
  z-index: 2;
}

...

.item-panel:nth-child(1) {
  z-index: 10;
}

---

我很高兴，这是我第一次尝试少用：）