less循环生成类

下面就是一个用于生成 CSS 栅格类的递归循环的实例：

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
输出：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

下面是一个生成延时动画的例子

.generate-delays(@n, @i: 1) when (@i =< @n) {
  .delay@{i} {
  	animation-delay:(0.5s*@i)s;
    -webkit-animation-delay:(0.5s*@i);
  }
  .generate-delays(@n, (@i + 1));
}
.generate-delays(5);

.delay1{animation-delay:.5 s;-webkit-animation-delay:.5 s}.delay2{animation-delay:1 s;-webkit-animation-delay:1 s}.delay3{animation-delay:1.5 s;-webkit-animation-delay:1.5 s}.delay4{animation-delay:2 s;-webkit-animation-delay:2 s}.delay5{animation-delay:2.5 s;-webkit-animation-delay:2.5 s}

注意 单位要在前面