5分鍾學會使用Less預編譯器

Less是什么？

LESS CSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用類似CSS的語法為CSS賦予了動態語言的特性，如變量、繼承、運算、函數等，更方便CSS的編寫和維護。

Less編譯器：筆者推薦Koala，官方下載鏈接為：http://koala-app.com/index-zh.html

安裝好之后就是這個樣子的啦：

下面開始學習使用Less！

 

·LESS中的注釋：

 -可以使用css中注釋（/**/）

-也可以使用//注釋，但是//注釋編譯的時候會自動被過濾

如圖：

·LESS中的變量：

-less中想聲明變量的話，一定要用@開頭，基本形式為:@變量名：值；

如圖：

經編譯后的CSS：

·混合變量

-定義好的一個類的樣式可以在另一個類中引用

如圖：

經編譯后的CSS：

更多例子：

·匹配模式

-相當於JS中的if，但不完全是。需要滿足條件后才能匹配。

示例：

示例中，類樣式中的第一個參數top、bottom、left、right表示的就是匹配條件，調用的時候必須帶上相應的條件則可調用相應的樣式。有時候，我們需要調用的類是有很多相同的樣式的，不同的只是某個位置或顏色，這時候我們就把相同的樣式寫在同樣的類名中，這時的第一個參數就是@_ ，如上圖所示。這樣調用的結果就是既有公共的樣式，又有唯一的條件樣式。

·運算：

-less中任何數字、顏色或者變量都可以參與運算（如+ - * /），運算應該被包裹在括號中。例如：
·嵌套規則：

-less中最有意思的小東西，有兩種用法

-對偽類使用 .& ：hover或focus

-對鏈接的使用-&-item

例如：

·arguments變量：

-@arguments包含了所有傳遞進來的參數

-如果你不想單獨處理每一個參數的話就可以這樣寫：

 

編譯后的CSS：

例如：

編譯后的CSS：

·避免編譯：

-有時候我們需要輸出一些不正確的CSS語法或者使用一些LESS不認識的專有語法，要在輸出這樣的值的字符前加上一個~

例如：

編譯后的CSS：

  更多：

Less中文網站：http://lesscss.net/

如果看不懂英文的，可以訪問less中文舊版網站：

http://old.lesscss.net/article/document.html

歡迎大家關注我的微信訂閱號：前端生活