z值从低值到低值减少

Question

我发现这个Less循环可以生成增量值：

@iterations: 10;

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

但是我怎样才能改变上面所以它会产生递减值呢？ （即相反）

非常感谢

Answer 1

将z-index属性的值更改为@iterations - @index + 1并作为旁注，以防止在每个伪类中重复position: 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;
}