作為一個(gè)前端開發(fā)座咆,寫css樣式是再平常不過(guò)的事情了私痹,有時(shí)候砂代,多個(gè)元素的樣式是一樣的昼窗,但是我們還是會(huì)把這些樣式重新寫一遍国撵,要不就是鍵盤三劍客 CTRL + C豺憔,CTRL + A帅容,CTRL + V牍帚,真是苦了比程序猿棍矛,現(xiàn)在安疗,我們不用再那么傻了,我們給css加點(diǎn)猛料够委。less是一個(gè)兼容css的拓展語(yǔ)言荐类。
因?yàn)?Less 和 CSS 非常像,因此很容易學(xué)習(xí)茁帽。而且 Less 僅對(duì) CSS 語(yǔ)言增加了少許方便的擴(kuò)展掉冶,這就是 Less 如此易學(xué)的原因之一。
Less 到底為 CSS 添加了什么功能脐雪?以下就是這些新加功能的概覽厌小。
嵌套寫法
原CSS:
less寫法:?
使用變量
less聲明變量的方式為:@變量名:值
代碼示例:
編譯為css代碼:
混合?
如果你想將一組屬性樣式添加到另外一組屬性樣式中去,你可以用混合來(lái)實(shí)現(xiàn)
代碼示例:
編譯為css代碼:
運(yùn)算?
less支持對(duì)任何數(shù)字战秋、顏色璧亚、變量之間進(jìn)行加、減、乘癣蟋、除運(yùn)算
在進(jìn)行加透硝、減運(yùn)算中會(huì)自動(dòng)進(jìn)行單位的換算,計(jì)算結(jié)果以左側(cè)的單位類型為準(zhǔn)疯搅,
如果單位換算無(wú)效或者無(wú)意義濒生,則會(huì)忽略單位(無(wú)效的單位例如換算例如:px 到 cm 或 rad 到 % 的轉(zhuǎn)換。)
注意:乘法和除法不作轉(zhuǎn)換幔欧。Less 將按數(shù)字的原樣進(jìn)行操作罪治,并將為計(jì)算結(jié)果指定明確的單位類型。