Less 循环

Less循环可以设置参数的值，也可以生成类，在CSS3动画中真是6得不要不要的。

下面我就实现一个分页符的响应式，在>896px的屏幕下显示10个数字按钮，小于只显示5个数字分页按钮。

1、首先我们先设置循环函数

    /*隐藏大于5 的分页符*/
   .hidden-numBtn(@n , @i : 5) when (@i <= @n){
      li:nth-child(@{i}){
        display: none;
      }
      .hidden-numBtn(@n , (@i + 1));
    }

2、参数说明

.hidden-numBtn：函数名

n：边界终值

i：初始增长值

然后在内部递归一下

3、调用函数

@media screen and(max-width: 896px){
      .hidden-numBtn(10);
}

我们在需要的地方调用函数即可，函数是作用域是全局的，在任意位置都可以调用。

我们来看一下编译后的css

@media screen and (max-width: 896px) {
  .paging .pagination li:nth-child(5) {
    display: none;
  }
  .paging .pagination li:nth-child(6) {
    display: none;
  }
  .paging .pagination li:nth-child(7) {
    display: none;
  }
  .paging .pagination li:nth-child(8) {
    display: none;
  }
  .paging .pagination li:nth-child(9) {
    display: none;
  }
  .paging .pagination li:nth-child(10) {
    display: none;
  }
}

才开始用Less，感觉真的很舒服呀，还在用纯css写的小伙伴，本人在这里力推Less，当然还有Sass，看自己习惯那个了。