之前學(xué)習(xí)過less灿意,sass語法估灿,現(xiàn)在記得不太清楚了,在項(xiàng)目中寫純css缤剧,又有點(diǎn)脫節(jié)馅袁,那就總結(jié)一下,完善一下我對less語法的知識(shí)體系荒辕。
趁有空汗销,就寫點(diǎn)東西嘍,啊哈哈
一. 先對Less來個(gè)大致了解吧
1.1 less是干嘛的抵窒?
首先less 和 sass 都是用于 CSS預(yù)編譯的弛针,比寫純css爽的多,但是解析的話還是要先轉(zhuǎn)換成css李皇,才能應(yīng)用到視圖上去削茁;
兩者最大的特點(diǎn)就是可以將CSS編程化,不再是單純的描述型語言疙赠,而且它可以支持一些邏輯算法付材。它可以讓CSS的編寫朦拖,更高效圃阳,更有趣,同時(shí)可以實(shí)現(xiàn)類似DOM樹的嵌套璧帝,而不用在無聊無味的擼一些重復(fù)性的代碼捍岳。總的來說less其實(shí)還是受sass的影響進(jìn)行開發(fā)的,但它們倆有一點(diǎn)不同锣夹,sass是用ruby寫的页徐,而less是用javascript寫的。
less提供了多種方式能平滑的將寫好的代碼轉(zhuǎn)化成標(biāo)準(zhǔn) CSS 代碼银萍,在很多流行的框架和工具盒中已經(jīng)能經(jīng)潮溆拢看到 less的身影了,例如 Twitter 提供的 bootstrap 庫就使用了 less贴唇。
我們可以通過 less的編譯器搀绣,將.less文件編譯成為** .css**文件,然后在 html 中引入戳气。
注意:less 是完全兼容 CSS 語法的链患,所以,即使
- 你將標(biāo)準(zhǔn)的 CSS 文件直接改成 .less 格式瓶您,
- 或者在.less文件中寫一些css麻捻,
less 編譯器不會(huì)報(bào)錯(cuò),可以完全識(shí)別呀袱。
二. 從大方面了解一下less語法
語法方面有如下幾大特點(diǎn):
- 1贸毕、變量
變量是一個(gè)極其方便的東西,像js一樣夜赵,變量可以在全局樣式中使用崖咨,變量使得樣式修改起來更加簡單。less中的變量和其他編程語言一樣油吭,可以實(shí)現(xiàn)值的復(fù)用击蹲,既然是變量,就有局部變量和全局變量之分婉宰。局部變量和全局變量的區(qū)別歌豺,跟js中的局部變量和全局變量的區(qū)別是類似的。
- 2心包、混入
Mixins(混入)功能對用開發(fā)者來說并不陌生类咧,很多動(dòng)態(tài)語言都支持 Mixins(混入)特性,它是多重繼承的一種實(shí)現(xiàn)蟹腾,在 LESS 中痕惋,混入是指在一個(gè) class 中引入另外一個(gè)已經(jīng)定義的class,就像在當(dāng)前class中增加一個(gè)屬性一樣娃殖。
- 3值戳、運(yùn)算
運(yùn)算功能是CSS所不具備的,但是less可以很方便實(shí)現(xiàn)運(yùn)算, 比如進(jìn)行簡單的加減乘除運(yùn)算等等炉爆。
- 4堕虹、函數(shù)
less也可以像js一樣定義函數(shù)卧晓,通過調(diào)用所定義的函數(shù)來實(shí)現(xiàn)部分功能。
- 5赴捞、嵌套
嵌套跟sass一樣逼裆,可以類似
DOM樹
進(jìn)行嵌套
,姑且叫樣式樹嵌套
吧赦政,它對于區(qū)分模塊
非常好胜宇。
干貨都在后頭呢,持續(xù)更新less恢着,請看我的LESS語法文集
+++++++++++++++++++++++++++++++++++++++++++++++++
----突然想寫上午感悟的一句話掸屡,提筆忘言啊,莫非鍵盤打出了內(nèi)傷然评?---
---我是DMXEL仅财。zmh'