跟我一起了解less（3）：判断和循环
官网的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 ......
