需求:我想根据nth-child
去递减z-index
的层级关系
Less Loop
.generate-z-index(@n, @i: 1) when (@i =< @n) {
.item:nth-child(@{i}){
z-index: (1000-@i);
}
.generate-z-index(@n, (@i + 1));
}
.generate-z-index(100);
结果
.item:nth-child(1) {
z-index: 999;
}
.item:nth-child(2) {
z-index: 998;
}
.item:nth-child(3) {
z-index: 997;
}
.item:nth-child(4) {
z-index: 996;
}
.item:nth-child(5) {
z-index: 995;
}
...
Sass For
@for $i from 1 through 100 {
.item:nth-child(#{$i}) { z-index: (1000-$i); }
}
结果
.item:nth-child(1) {
z-index: 999; }
.item:nth-child(2) {
z-index: 998; }
.item:nth-child(3) {
z-index: 997; }
.item:nth-child(4) {
z-index: 996; }
.item:nth-child(5) {
z-index: 995; }
...
比较两种其实sass更简洁
tips: 简书上交流可能会看不到消息,如有问题,欢迎进群交流50063010