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

Less是一個(gè)CSS預(yù)處理器，先不管人們?yōu)楹芜@樣命名，在用原生CSS寫樣式的時(shí)候，有時(shí)候有沒有一種很繁瑣的感覺？繁瑣在哪呢？

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

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

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

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

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

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

Less的功能很強(qiáng)大，我們先來看第一個(gè)遇到的問題：重復(fù)性樣式。

這其實(shí)在原生CSS也有解決辦法，那就是將公共部分抽取出來，用一個(gè)個(gè)類名來存，但就像Bootstrap一樣會(huì)出現(xiàn)一個(gè)標(biāo)簽上N多個(gè)類名，實(shí)在不利于維護(hù)，那怎么辦呢？看看下面的混合模式：

混合(Mixin)與嵌套:

看看這個(gè)編譯后變成怎樣的哈：

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

再看第三個(gè)問題——兼容處理。

參數(shù)：

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

然后呢，你會(huì)發(fā)現(xiàn)你寫的樣式變成這樣：

而且后續(xù)的還能繼續(xù)復(fù)用，很方便對吧？border-radius還可傳入?yún)?shù)，比如傳入3，自動(dòng)變成3px，這就是Less相較于原生CSS強(qiáng)大太多的地方，它讓CSS有了像JavaScript一樣的動(dòng)態(tài)靈魂。

參數(shù)另一個(gè)很強(qiáng)大的作用在于修改起來很方便，比如說，定義成常量的參數(shù)，像下面這樣：

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

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

后續(xù)需要多少直接傳多少的參數(shù)即可，甚至你還不怕當(dāng)項(xiàng)目的資源目錄(比如圖片)結(jié)構(gòu)發(fā)生變化，你不再需要去一個(gè)個(gè)的修改圖片的url，而僅僅需要修改定義的@url參數(shù)，就可以達(dá)到批量修改的目的，是不是很強(qiáng)大？？

函數(shù)

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

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

計(jì)算

Less還有一個(gè)較強(qiáng)大的功能，那就是計(jì)算，其實(shí)由于最終都會(huì)轉(zhuǎn)譯成CSS，所以實(shí)際上還是常量，只不過是一種比較方便的寫出相近的常量，比如顏色風(fēng)格。

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

實(shí)際上因?yàn)樽罱K轉(zhuǎn)譯的情況，它實(shí)際上是常量，是以基礎(chǔ)數(shù)據(jù)為基礎(chǔ)計(jì)算后返回過來的常量。

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

好了，Less的相關(guān)介紹暫時(shí)到這，后續(xù)想到再來補(bǔ)充。期待后續(xù)的Sass吧= =

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。