less基礎(chǔ)2

(每次學(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}。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末敷存,一起剝皮案震驚了整個(gè)濱河市墓造,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌锚烦,老刑警劉巖觅闽,帶你破解...
    沈念sama閱讀 222,000評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異涮俄,居然都是意外死亡蛉拙,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門彻亲,熙熙樓的掌柜王于貴愁眉苦臉地迎上來孕锄,“玉大人,你說我怎么就攤上這事苞尝』粒” “怎么了?”我有些...
    開封第一講書人閱讀 168,561評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵宙址,是天一觀的道長(zhǎng)轴脐。 經(jīng)常有香客問我,道長(zhǎng)抡砂,這世上最難降的妖魔是什么大咱? 我笑而不...
    開封第一講書人閱讀 59,782評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮注益,結(jié)果婚禮上碴巾,老公的妹妹穿的比我還像新娘。我一直安慰自己丑搔,他們只是感情好厦瓢,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,798評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著低匙,像睡著了一般旷痕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上顽冶,一...
    開封第一講書人閱讀 52,394評(píng)論 1 310
  • 那天欺抗,我揣著相機(jī)與錄音,去河邊找鬼强重。 笑死绞呈,一個(gè)胖子當(dāng)著我的面吹牛贸人,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播佃声,決...
    沈念sama閱讀 40,952評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼艺智,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了圾亏?” 一聲冷哼從身側(cè)響起十拣,我...
    開封第一講書人閱讀 39,852評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎志鹃,沒想到半個(gè)月后夭问,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,409評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡曹铃,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,483評(píng)論 3 341
  • 正文 我和宋清朗相戀三年缰趋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陕见。...
    茶點(diǎn)故事閱讀 40,615評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡秘血,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出评甜,到底是詐尸還是另有隱情灰粮,我是刑警寧澤,帶...
    沈念sama閱讀 36,303評(píng)論 5 350
  • 正文 年R本政府宣布蜕着,位于F島的核電站谋竖,受9級(jí)特大地震影響红柱,放射性物質(zhì)發(fā)生泄漏承匣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,979評(píng)論 3 334
  • 文/蒙蒙 一锤悄、第九天 我趴在偏房一處隱蔽的房頂上張望韧骗。 院中可真熱鬧,春花似錦零聚、人聲如沸袍暴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)政模。三九已至,卻和暖如春蚂会,著一層夾襖步出監(jiān)牢的瞬間淋样,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工胁住, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留趁猴,地道東北人刊咳。 一個(gè)月前我還...
    沈念sama閱讀 49,041評(píng)論 3 377
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像儡司,于是被迫代替她去往敵國(guó)和親娱挨。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,630評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容