Less Loop循环,或Sass For循环用在 :nth-c

作者: 马小帅mm | 来源:发表于2019-05-07 11:42 被阅读0次

需求：我想根据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