準(zhǔn)備構(gòu)建項(xiàng)目的CSS框架,使用LESS來(lái)作為預(yù)編譯器兽泄。
在寫柵格布局時(shí),參考ant-design的24欄布局病梢,需要設(shè)置.col-{n}
通常需要從1寫到24重復(fù)設(shè)置width屬性,重復(fù)性很強(qiáng)觅彰,后續(xù)如果修改為12欄布局钮热,維護(hù)很不方便
.col-1{width:4%}
.col-2{width:8%}
...
.col-24{width:100%}
如果用less的循環(huán)布局就大大減少了代碼量,而且便于后續(xù)修改維護(hù)飒责,less提供了類似函數(shù)的模塊封裝并提供了內(nèi)置函數(shù)when做條件判斷
.col-loop(@counter) when (@counter>0){
&.col-@{counter}{
width:@counter/24*100%;
}
.col-loop((@counter)-1);
}
.col-loop(24);