下面就是一个用于生成 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}
注意 单位要在前面
