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}

注意 单位要在前面



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值