Less，顧名思義，少，在我看來，它有著與jQuery一樣的思想——Write Less,Do More，盡管實際上這兩者是完全不同的兩個東西。

Less是一個CSS預處理器，先不管人們為何這樣命名，在用原生CSS寫樣式的時候，有時候有沒有一種很繁瑣的感覺？繁瑣在哪呢？

你可能不知不覺寫了很多重復性的樣式，可能其中只有一小部分不一致，比如說這樣：

或者說你可能需要很深層的嵌套設置樣式，比如這樣：

假設說你可能還要處理兼容，比如這樣：

甚至說同樣一個右內邊距，但采用原生CSS，你不得不這樣做：

相信你會崩潰的，是的，那有什么辦法解決這樣的問題呢？

答案就是CSS預處理器，諸如Less、Sass，它使用類似CSS的語法為CSS賦予了動態語言的特性，如變量、繼承、運算、函數等，更方便CSS的編寫和維護。我們這里先說說Less。

Less的功能很強大，我們先來看第一個遇到的問題：重復性樣式。

這其實在原生CSS也有解決辦法，那就是將公共部分抽取出來，用一個個類名來存，但就像Bootstrap一樣會出現一個標簽上N多個類名，實在不利于維護，那怎么辦呢？看看下面的混合模式：

混合(Mixin)與嵌套:

看看這個編譯后變成怎樣的哈：

混合模式可以說是Less一個非常容易上手但卻是很好用的特性，你會發現，你在一個類名的樣式對里放了另一個類名，這在Less是允許的，而且父子關系的標簽樣式可以嵌套，你不必定義一個parent類名，又得設置一個.parent .children類，配合著編輯器的代碼收起功能，你可以非常方便的定位。這樣第二個問題是不是也順帶解決了？

再看第三個問題——兼容處理。

參數：

我們可以把其中的border-radius用參數化的方式抽出，放入一個公共Less，配合著Css3的模塊化@import，比如變成這樣：

然后呢，你會發現你寫的樣式變成這樣：

而且后續的還能繼續復用，很方便對吧？border-radius還可傳入參數，比如傳入3，自動變成3px，這就是Less相較于原生CSS強大太多的地方，它讓CSS有了像JavaScript一樣的動態靈魂。

參數另一個很強大的作用在于修改起來很方便，比如說，定義成常量的參數，像下面這樣：

假如說你下面還有很多應用到紅色或30的行高的，傳統的方式你可能不得不一個個去改，是不是很累？而這里，你僅僅需要修改默認的@line-height的值就全部修改啦，是不是很好用？

這樣參數還可以解決上面第四個問題，你可能不得不定義一堆從pr0、pr10...直到pr100，不累嗎？而這里，你僅僅只需要：

后續需要多少直接傳多少的參數即可，甚至你還不怕當項目的資源目錄(比如圖片)結構發生變化，你不再需要去一個個的修改圖片的url，而僅僅需要修改定義的@url參數，就可以達到批量修改的目的，是不是很強大？？

函數

Less另一個強大的地方在于函數，它內置了類似于這樣的函數寫法，比如下面這一個，實際上就類似于JavaScript里的switch，非常神似對吧？也很強大對吧？讓CSS看起來都不像CSS。

Less的函數還有很多，這里僅僅介紹了類switch寫法。

計算

Less還有一個較強大的功能，那就是計算，其實由于最終都會轉譯成CSS，所以實際上還是常量，只不過是一種比較方便的寫出相近的常量，比如顏色風格。

看看編譯后是什么樣的哈：

實際上因為最終轉譯的情況，它實際上是常量，是以基礎數據為基礎計算后返回過來的常量。

嗯，說了這么多，你可能會說，Less瀏覽器識別不了，我得轉譯，是的，這里的話推薦一個給大家，那就是logo為考拉的koala，它的界面是這樣的：

好了，Less的相關介紹暫時到這，后續想到再來補充。期待后續的Sass吧= =

總結

以上是生活随笔為你收集整理的css预编译其器,CSS预处理器之——Less的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。