也是不定期更新吧拉讯，具體也沒(méi)有總結(jié)一下：
之前的文章 less的配置安裝及語(yǔ)法使用 也介紹了一些less的語(yǔ)法上沐，
這里只是根據(jù)我平時(shí)會(huì)用到的進(jìn)行一個(gè)總結(jié)：
函數(shù)參數(shù)帶有類名設(shè)置
-
函數(shù)定義
這個(gè)根據(jù)每個(gè)的設(shè)計(jì)稿和基礎(chǔ)適配的font-size決定，我這里只是說(shuō)傳入?yún)?shù)生成對(duì)應(yīng)的rem的值
@base:750 / 720 * 0.01;
.px2rem(@name, @px) {
@{name}: @px * @base * 1rem;
}
-
函數(shù)調(diào)用
.px2rem(margin-top,250);
-
使用語(yǔ)法
如果是參數(shù)饮六，類名參數(shù)要加大括號(hào)@{name}仑最，不是冒號(hào)左邊的不需要朴则，如果有雙引號(hào)也要加歇终。
less循環(huán)輸出類名
-
目標(biāo)輸出
.a{
background: url("./resource/a.png") top/100% no-repeat;
}
.b{
background: url("./resource/b.png") top/100% no-repeat;
}
.c{
background: url("./resource/c.png") top/100% no-repeat;
}
-
實(shí)現(xiàn)思路
- 由于形式上面很類似，所以先定義一個(gè)模板函數(shù)逼龟；
- 定義一個(gè)less列表评凝，把需要的類名都寫(xiě)上；
- 循環(huán)遍歷列表腺律，調(diào)用函數(shù)奕短。
-
實(shí)現(xiàn)步驟
- 定義函數(shù)
``` .backgroundcard(@className,@pngName){ .@{className}{ background: url("./resource/@{pngName}.png") top/100% no-repeat; } } ```- 定義一個(gè)數(shù)組
@bgcardList:a,b,c,d,e,f,g;- 循環(huán)遍歷
.loop(@i) when (@i < length(@bgcardList)+1){ .backgroundcard(extract(@bgcardList, @i),extract(@bgcardList, @i)); .loop(@i+1); } .loop(1); -
語(yǔ)法
+ 列表函數(shù) - 獲取列表的長(zhǎng)度 length(@bgcardList) //7 - 獲取列表元素 extract(@bgcardList, 3) //c + 循環(huán)函數(shù) - loop定義循環(huán)次數(shù)宜肉，when條件判斷，符合進(jìn)入函數(shù)翎碑，不符合不進(jìn)入函數(shù)谬返。之后次數(shù)+1，形成循環(huán)日杈。 - loop函數(shù)調(diào)用遣铝，直接傳值1。
@version1.0——2018-8-3——?jiǎng)?chuàng)建《less的函數(shù)與循環(huán)——使用總結(jié)》
分割線
之后將不定期更新...
?burning_韻七七
