less循环生成类

来源：互联网发布：云计算软件工程师编辑：程序博客网时间：2024/05/16 02:30

下面就是一个用于生成 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}

注意 单位要在前面

0 0