您现在的位置:首页 >> 前端 >> 内容

LESS循环

时间:2017/4/15 9:57:00 点击:

  核心提示:LESS循环:循环操作非常有用的方法,我用动画库时,发现没有动画延迟的css,但是呢?如果动画需要顺序执行的话,又需要和动画执行速度有关,基于这个应用场景:@speed:0.8s;//这个是动画的执行...

LESS循环:循环操作非常有用的方法,我用动画库时,发现没有动画延迟的css,但是呢?如果动画需要顺序执行的话,又需要和动画执行速度有关,基于这个应用场景:

        
@speed:0.8s;//这个是动画的执行时间
.loop(@n) when (@n > 0) {
  .animated.delay@{n}{
      animation-delay:(@n*@speed) ;
  }
  //循环调用自身
  .loop((@n - 1));
}

.loop(5) ;
        

编译之后

        
.animated.delay5 {
  animation-delay: 4s;
}
.animated.delay4 {
  animation-delay: 3.2s;
}
.animated.delay3 {
  animation-delay: 2.4s;
}
.animated.delay2 {
  animation-delay: 1.6s;
}
.animated.delay1 {
  animation-delay: 0.8s;
}          
        

 

    Tags:LE ES SS S循 
    作者:网络 来源:lijl058的专栏