官网的api中，判断和循环是page的后面才被说明的，可能官方认为它们两个也属于“混合”。

但为了更好的学习less，我把它拿到了这章先来了解一下。

注：例子截图是转换成css的语句

1、判断：官网称作Mixin Guards

（1）语法规则：when ( 布尔值 ) { 内容 }

//用法一:when放在函数后面
.change(@color) when (lightness(@color) >= 50%) { //lightness()是less的一个内部函数，根据颜色返回亮度百分比
   
}
.change(@color) when (lightness(@color) < 50%) {
    background-color: @color + #333;
}
.change(@color) { //.change()是自定义的函数
    border-color: @color;
}
.box-part1 {
    width:50px;
    height:50px;
    border:1px solid;
    .change(#ddd); //调用.change()函数
}
.box-part2 {
    width:50px;
    height:50px;
    border:1px solid;
    .change(#555);
}

//用法二：when放在选择器后面
@style: 1;
.box-part3 when (@style = 1) {
    width:50px;
    height:50px;
    border:1px solid #33FF66;    
}
.box-part3 when (@style = 2) {
    width:50px;
    height:50px;
    border:1px solid #FF5500;    
}

//用法三：单独使用when进行判断，此时需要在when前加上“&”符号
.box-part4 {
    width:50px;
    height:50px;
   
}
@style: 1;
&when (@style = 1) { // “& when”中间留有空格，这样也是可以的
    .box-part4 {
        background-color:#FF5500;
    }
}

（2）判断

布尔值：less中任何非true的值都是false，如 @aaa:"1"、#012 等等

条件：>、>=、<=、<、= （注意：判断等于是一个等号并非js中的双等号）

逻辑：and、,、not 来表示与或非

//用法四：判断条件例子
@s1:11%;
@c1:#444; //非数值类型的只能用“=”来判断，包括颜色，如果用其他的判断都返回false
& when (@s1 > 10%) and (@c1 > #444 ) { //与
    .box-part5&:before{content:"and";}
}
& when (@s1 > 10%) , (@c1 > #444 ) { //或，注意less用逗号代替
    .box-part5&:before{content:"or";}
}
& when not (@c1 > #444 ) { //非
    .box-part5&:before{content:"not";}
}
.box-part5&:before{
    width:50px;
    height:50px;
}

（3）判断函数

判断函数只返回true和false，相对比较简单，看上图中的函数名就能知道含义。

（4）模拟else分支

按照官网截图的意思，是需要用到default()函数来模拟else的情况

//用法五:这里我做了个实验,发现default()函数只能在类似于.aaa()的函数式中使用，单独或者在选择器的后面接when使用都会报错
@s2:9%;
.aaa() when (@s2 > 10%) {.box-part6&:before {content:"s2>10%";}}
.aaa() when (default()) {.box-part6&:before {content:"others";}}
.aaa() when (@s2 < 6%) {.box-part6&:before {content:"s2<6%";}}
.aaa();

2、循环：less本身没有循环的语法，但是函数可以递归来调用，这样就可以模拟循环

//用法六：模拟for循环
.for(@i,@cor) when(@i <= 6) { //@i、@cor循环的初值
    .for(@i + 1,@cor + #222); //@i + 1 相当于"++i"
    .box-part@{i} {
        width:50px;
        height:50px;
       
    }
}
.for(1,#F51);

to be continue ......