之前學習過less,sass語法,現在記得不太清楚了,在項目中寫純css,又有點脫節,那就總結一下,完善一下我對less語法的知識體系。
趁有空,就寫點東西嘍,啊哈哈
一. 先對Less來個大致了解吧
1.1 less是干嘛的?
首先less 和 sass 都是用于 CSS預編譯的,比寫純css爽的多,但是解析的話還是要先轉換成css,才能應用到視圖上去;
兩者最大的特點就是可以將CSS編程化,不再是單純的描述型語言,而且它可以支持一些邏輯算法。它可以讓CSS的編寫,更高效,更有趣,同時可以實現類似DOM樹的嵌套,而不用在無聊無味的擼一些重復性的代碼。總的來說less其實還是受sass的影響進行開發的,但它們倆有一點不同,sass是用ruby寫的,而less是用javascript寫的。
less提供了多種方式能平滑的將寫好的代碼轉化成標準 CSS 代碼,在很多流行的框架和工具盒中已經能經常看到 less的身影了,例如 Twitter 提供的 bootstrap 庫就使用了 less。
我們可以通過 less的編譯器,將.less文件編譯成為** .css**文件,然后在 html 中引入。
注意:less 是完全兼容 CSS 語法的,所以,即使
- 你將標準的 CSS 文件直接改成 .less 格式,
- 或者在.less文件中寫一些css,
less 編譯器不會報錯,可以完全識別。
二. 從大方面了解一下less語法
語法方面有如下幾大特點:
- 1、變量
變量是一個極其方便的東西,像js一樣,變量可以在全局樣式中使用,變量使得樣式修改起來更加簡單。less中的變量和其他編程語言一樣,可以實現值的復用,既然是變量,就有局部變量和全局變量之分。局部變量和全局變量的區別,跟js中的局部變量和全局變量的區別是類似的。
- 2、混入
Mixins(混入)功能對用開發者來說并不陌生,很多動態語言都支持 Mixins(混入)特性,它是多重繼承的一種實現,在 LESS 中,混入是指在一個 class 中引入另外一個已經定義的class,就像在當前class中增加一個屬性一樣。
- 3、運算
運算功能是CSS所不具備的,但是less可以很方便實現運算, 比如進行簡單的加減乘除運算等等。
- 4、函數
less也可以像js一樣定義函數,通過調用所定義的函數來實現部分功能。
- 5、嵌套
嵌套跟sass一樣,可以類似
DOM樹
進行嵌套
,姑且叫樣式樹嵌套
吧,它對于區分模塊
非常好。
干貨都在后頭呢,持續更新less,請看我的LESS語法文集
+++++++++++++++++++++++++++++++++++++++++++++++++
----突然想寫上午感悟的一句話,提筆忘言啊,莫非鍵盤打出了內傷?---
---我是DMXEL。zmh'