less基础2

（每次学循环必懵。。。。）
“在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。”

所以什么是Guard表达式和模式匹配？

less对于判断也有很大需求，但是less没用采用if/else相似，而是用when来装条件，条件满足了在执行大括号里边的内容。
when()中可以放关于@n的表达式、可以放内置函数、is函数。

.mixin(@n) when(@n > 5){
  background: red;
}
.mixin(@n) when(@n < 5){
  background: blue;
}
div{
  .mixin(7);  //调用，传入参数7, 7>5, 条件符合第一个，设置背景为red
}

.mixin1(@n) when(lightness(@n) > 50%){
  background: red;
}
//is函数:
//iscolor、isnumber、isstring、iskeyword、isurl
.mixin2(@n) when(iscolor(@n)){
  background: @n;
}

when中可以设置多条件，注意去掉when的括号并把条件加上括号：

.mixin(@n) when (@n > 5) and (@n < 10){
  background: red;
}
.mixin(@n) when (@n > 5) , (@n < -5){
  background: red;
}

循环就是在以上的基础上再内容里调用自身。

方式1：

.loop(@i) when (@i >= 0) {
  .loop((@i- 1));    // 递归调用自身
  width: (10px * @i); 
}
div{
.loop(5);    //@i的值可以取5、4、3、2、1、0
}

方式2：

.loop(@n, @i:1) when (@i <= @n ) {
  li:nth-child(@{i}){
    background-image: url('../images/page5_bubble.png');
  }
  .loop(@n, (@i + 1));
}
ul {
.loop(5);    //@i值可以取1、2、3、4、5，为ul的每个li设置背景

注意有时不能直接用@i，有时需要为其加上括号：@{i}。