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