(每次學(xué)循環(huán)必懵捅位。轧葛。。艇搀。)
“在Less中尿扯,混合可以調(diào)用它自身。這樣焰雕,當(dāng)一個(gè)混合遞歸調(diào)用自己衷笋,再結(jié)合Guard表達(dá)式和模式匹配這兩個(gè)特性,就可以寫出循環(huán)結(jié)構(gòu)淀散∮依常”
所以什么是Guard表達(dá)式和模式匹配蚜锨?
less對(duì)于判斷也有很大需求档插,但是less沒用采用if/else相似,而是用when來裝條件亚再,條件滿足了在執(zhí)行大括號(hào)里邊的內(nèi)容郭膛。
when()中可以放關(guān)于@n的表達(dá)式、可以放內(nèi)置函數(shù)氛悬、is函數(shù)则剃。
.mixin(@n) when(@n > 5){
background: red;
}
.mixin(@n) when(@n < 5){
background: blue;
}
div{
.mixin(7); //調(diào)用,傳入?yún)?shù)7, 7>5, 條件符合第一個(gè)如捅,設(shè)置背景為red
}
.mixin1(@n) when(lightness(@n) > 50%){
background: red;
}
//is函數(shù):
//iscolor棍现、isnumber、isstring镜遣、iskeyword己肮、isurl
.mixin2(@n) when(iscolor(@n)){
background: @n;
}
when中可以設(shè)置多條件,注意去掉when的括號(hào)并把條件加上括號(hào):
.mixin(@n) when (@n > 5) and (@n < 10){
background: red;
}
.mixin(@n) when (@n > 5) , (@n < -5){
background: red;
}
循環(huán)就是在以上的基礎(chǔ)上再內(nèi)容里調(diào)用自身悲关。
方式1:
.loop(@i) when (@i >= 0) {
.loop((@i- 1)); // 遞歸調(diào)用自身
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的每個(gè)li設(shè)置背景
注意有時(shí)不能直接用@i肋乍,有時(shí)需要為其加上括號(hào):@{i}。