(每次学循环必懵。。。。)
“在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}。