認(rèn)識(shí)Less
1.首先它是干嘛的
2.如何配置它
3.用sublime編輯器如何讓它的代碼高亮，提升編碼質(zhì)量
4.它的語(yǔ)法難嗎
5.我要怎么編譯它，轉(zhuǎn)成我要用的css(基于less的工具,node實(shí)現(xiàn))
我們先來(lái)看下官網(wǎng)怎么說(shuō)的
一種動(dòng)態(tài)樣式語(yǔ)言.
LESS將CSS賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量，繼承，運(yùn)算，函數(shù). LESS既可以在客戶端上運(yùn)行(支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服務(wù)端運(yùn)行。
也就是說(shuō)它最終輸出的還是我們所認(rèn)識(shí)的css， 它具有動(dòng)態(tài)的語(yǔ)言特性。所以，它最終還是一個(gè)工具，并不是取代我們的css，這一點(diǎn)要記住。既然是工具，那一定有它的運(yùn)行環(huán)境：
環(huán)境配置
我在用的時(shí)候，看過(guò)別人的博客寫的一些文章，有講在瀏覽器端引入less.js文件的等等用法，但是我個(gè)人認(rèn)為，有好的工具可以用，為什么要糾結(jié)怎么用呢，比如基于webpack的，這些都是很好的工具。下面我給大家分享一下我個(gè)人用的工具（當(dāng)然，各有所好，你也可以去官網(wǎng)上把方法都試一下）
因?yàn)槭腔趎ode的，所以第一步要搭建好node環(huán)境：（因?yàn)椴皇侵攸c(diǎn)介紹node,所以簡(jiǎn)單的搭建一下）
Node.js安裝包及源碼下載地址為：https://nodejs.org/en/download/
官網(wǎng)有不同操作系統(tǒng)的版本，根據(jù)你的電腦，下載合適的版本進(jìn)行安裝。
詳細(xì)參考這里：http://www.runoob.com/nodejs/nodejs-install-setup.html
安裝好以后我是試一下是否安裝成功：（命令行工具 windows:在開(kāi)始那打cmd ）
node --version? npm --version （安裝好后這個(gè)包工具一般自帶）
成功它會(huì)返回版本號(hào)
簡(jiǎn)單的搭建就到這里，下面我們進(jìn)入今天要講的less
命令行輸入：
npm install less -g? （-g全局可以使用，就是你在d盤和桌面都可以調(diào)用它）
你也可以指定版本號(hào)：
npm install less@1.6.2 -g
當(dāng)然你也可以檢測(cè)它是否安裝成功：
lessc --version (注意輸入的是lessc）
使用它：
Usage: lessc [option option=parameter ...][destination]
給大家一個(gè)實(shí)例：
lessc -x ./less/index.less main.css
意思就是用這個(gè)編譯工具去編譯當(dāng)前目錄less文件夾下的index.less文件 編譯成功后，結(jié)果輸出到當(dāng)前目錄下的main.css文件中，如果不存在main,會(huì)自動(dòng)創(chuàng)建,這里只需要在html文件中引入main.css的文件就可以了。這個(gè)工具的好處是，它可以壓縮代碼，很神奇吧~~
對(duì)于有強(qiáng)迫癥的同學(xué)來(lái)說(shuō)，當(dāng)你很努力的敲上一段代碼時(shí)，你的編輯器全是灰灰的代碼，估計(jì)連繼續(xù)寫下去的想法都沒(méi)有了~。這里給大家介紹一個(gè)sublime的插件，可以高亮less文件中的代碼哦~~~
下載地址：https://github.com/danro/LESS-sublime/zipball/master
如何去安裝它（sublime）
菜單欄首先找到首選項(xiàng)，選擇第一個(gè)，它會(huì)打開(kāi)瀏覽插件的目錄，然后新建less的目錄，將你剛剛下載的壓縮包解壓到那個(gè)文件夾，ok安裝好。緊接著使用它就好了，來(lái)看圖：
是不是很簡(jiǎn)單~~~
語(yǔ)法介紹
給大家介紹常用的用法：
1.變量
恩，這個(gè)詞不陌生，js中常提到。
@color: red;
body{ background: @color;}
從代碼看，很容易理解，就是將需要的值存在一個(gè)代碼中，可以帶不同的地方調(diào)用它。改的時(shí)候，只需要改一處就好了。
2.混合
先看一個(gè)代碼：
是不是看上去很簡(jiǎn)潔呢？ less還是很強(qiáng)大的。
3.嵌套規(guī)則
我們可以在一個(gè)選擇器中嵌套另一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承，這樣很大程度減少了代碼量，并且代碼看起來(lái)更加的清晰。
4.函數(shù)&運(yùn)算
運(yùn)算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運(yùn)算，這樣就可以實(shí)現(xiàn)屬性值之間的復(fù)雜關(guān)系。LESS中的函數(shù)一一映射了JavaScript代碼，如果你愿意的話可以操作屬性值。
這里要提的是，不能瞎運(yùn)算，舉個(gè)例子，可能你會(huì)疏忽這樣寫： .red(@length*4) ，不信的話，你編譯一下，它會(huì)報(bào)錯(cuò)的。
5.注釋
CSS 形式的注釋在LESS 中是依然保留的
LESS 同樣也支持雙斜線的注釋, 但是編譯成CSS 的時(shí)候自動(dòng)過(guò)濾掉
6.其他
當(dāng)然less還有一些高級(jí)語(yǔ)法，在這里就不一一介紹了，給大家貼個(gè)手冊(cè)，感興趣的，看一看。
別人曾經(jīng)在學(xué)習(xí)上給了我很大的幫助，如今我也想寫點(diǎn)東西去幫助別人，僅此而已
