【LESS系列】简介和使用
LESS —— 一個(gè)CSS預(yù)編譯框架，它在CSS的語(yǔ)法基礎(chǔ)之上，引入了變量、Mixin（混入）、運(yùn)算以及函數(shù)等功能，大大簡(jiǎn)化了CSS的編寫，并且降低了CSS的維護(hù)成本，就像它的名稱所說(shuō)的那樣，LESS可以讓我們用更少的代碼做更多的事情。
?
有CSS基礎(chǔ)的同學(xué)，學(xué)習(xí)LESS會(huì)非常容易上手，因?yàn)樗鼈兊姆浅Ｏ嗨啤?/span>
?
本質(zhì)上，LESS包含一套自定義的語(yǔ)法及一個(gè)解析器，用戶根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則，這些規(guī)則最終會(huì)通過(guò)解析器，編譯生成對(duì)應(yīng)的CSS文件。LESS并沒(méi)有裁剪CSS原有的特性，更不是用來(lái)取代CSS的，而是在現(xiàn)有CSS語(yǔ)法的基礎(chǔ)上，為CSS加入程序式語(yǔ)言的特性。
?
LESS可以直接在客戶端使用，也可以在服務(wù)器端使用，但是直接使用LESS的做法我是不推薦的，因?yàn)檫@樣增加了性能損耗。在實(shí)際項(xiàng)目開(kāi)發(fā)中，我們更推薦將LESS文件編譯生成靜態(tài)CSS文件，并在HTML文檔中應(yīng)用。因此，這里直接省略了如何在客戶端和服務(wù)端使用LESS，有興趣的同學(xué)，可以到【http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/】這篇文章找到相關(guān)的信息，and本文中不少的內(nèi)容也是摘自該文章，這里順便表達(dá)對(duì)該文章的尊重。
?
如何將LESS文件編譯生成靜態(tài)CSS文件呢？小生在實(shí)際開(kāi)發(fā)中所用的方法是通過(guò)Webstrom的LESS CSS Compiler插件。它能在LESS文件修改保存的時(shí)候檢測(cè)LESS文件變化，然后編譯生成CSS文件。當(dāng)然，對(duì)于有些同學(xué)來(lái)說(shuō)，開(kāi)發(fā)機(jī)器不怎么給力，你也可以手動(dòng)觸發(fā)編譯，這樣可以減輕機(jī)器負(fù)擔(dān)。（回想起當(dāng)年的血淚史了...）當(dāng)然，方法總是比問(wèn)題多。除了這個(gè)方法之外，肯定還有別的方法，這里就不作探討了，有需要的同學(xué)自行摸索吧。
?
接下來(lái)我們來(lái)具體說(shuō)說(shuō)我上面提到的方法——Webstrom加LESS CSS Compiler插件，三言兩語(yǔ)的描述，相信對(duì)于沒(méi)接觸過(guò)的同學(xué)來(lái)說(shuō)還是太過(guò)模糊，我們來(lái)點(diǎn)實(shí)際的。
?
Webstrom官網(wǎng)：http://www.jetbrains.com/webstorm/index.html
LESS CSS Compiler官方插件頁(yè)：http://plugins.jetbrains.com/plugin?pr=&pluginId=7059
Webstrom的下載我相信應(yīng)該是沒(méi)什么大問(wèn)題的，因?yàn)榫退闵喜蝗ス倬W(wǎng)，國(guó)內(nèi)也應(yīng)該有其他的下載資源。
對(duì)于破解嘛，天朝的碼農(nóng)們的強(qiáng)項(xiàng)，人人必備，也無(wú)須我廢話。
至于LESS CSS Compiler...如果你實(shí)在打不開(kāi)官方插件頁(yè)，試試直接用下面的url下載試試看吧...
http://plugins.jetbrains.com/files/7059/14973/lessc-plugin.zip
如果這樣也不行，那建議你考慮用其他方法吧，國(guó)內(nèi)我一時(shí)也沒(méi)找到很好的下載資源。
?
下載完之后，開(kāi)始安裝吧...
Webstrom，傻瓜式無(wú)腦安裝，不廢話...不過(guò)這里補(bǔ)充一點(diǎn)，我這時(shí)用的是Webstrom8.0版本，所以后面的步驟都是以此版本為基礎(chǔ)的。
安裝好后，運(yùn)行Webstrom——右上角菜單欄file選項(xiàng)卡——settings——左側(cè)選Plugins——右側(cè)面板底部的幾個(gè)按鈕中找到Install plugin from disk...——選中LESS CSS Compiler插件zip壓縮包的所在路徑——點(diǎn)OK安裝——再點(diǎn)擊settings窗口上的OK按鈕——彈出重啟Webstrom提示框——重啟Webstrom——LESS CSS Compiler插件安裝大功告成~~~
然后是配置階段，好吧，到了這個(gè)階段必須上圖了...
?
首先建一個(gè)測(cè)試項(xiàng)目，結(jié)構(gòu)如下，簡(jiǎn)單得不能再簡(jiǎn)單了吧~~
?
然后打開(kāi)settings界面，找到LESS Profiles選項(xiàng)，然后點(diǎn)擊加號(hào)添加配置，輸入配置名，這里我用的是test，然后選中剛添加的test配置，就能看到如下圖的界面
Name - 配置名，也就是剛剛的test
LESS source directory - less源文件所在目錄
Include files by path - 對(duì)應(yīng)目錄中，需要執(zhí)行編譯的less文件（多個(gè)文件用“,”隔開(kāi)，支持“*”和“?”分別進(jìn)行多個(gè)和單個(gè)字符的匹配）
Exclude files by path -?對(duì)應(yīng)目錄中，不需要執(zhí)行編譯的less文件（多個(gè)文件用“,”隔開(kāi)，支持“*”和“?”分別進(jìn)行多個(gè)和單個(gè)字符的匹配）
CSS Output Directory - 生成css文件的存放目錄
Compile automatically on save - 當(dāng)文件修改并保存時(shí)，自動(dòng)編譯（個(gè)人不建議勾選此項(xiàng)，比較推薦使用手動(dòng)編譯）
Compress CSS output - 編譯后生成壓縮版的CSS文件（我在開(kāi)發(fā)過(guò)程中一般情況下都會(huì)勾選它，只有在個(gè)別特殊調(diào)試有需要的時(shí)候，才會(huì)把選中去掉）
?
因?yàn)槲覀冃枰玫绞謩?dòng)觸發(fā)less編譯，所以這里給這一操作設(shè)置一下快捷鍵。打開(kāi)settings界面，找到keymap，然后在快捷鍵列表里找到Compile to CSS。
啥？怎么找？合理運(yùn)用Webstorm自帶的搜索功能吧，這里就不再對(duì)這些細(xì)節(jié)做逐步細(xì)述了。我已經(jīng)是一個(gè)粗枝大葉的人了，我都知道的東西，你不知道的話，你就該檢討一下了。
找到之后，覺(jué)得什么快捷鍵方便好記，隨便用。只要注意不要和默認(rèn)快捷鍵沖突就行了，如果出現(xiàn)沖突，Webstorm會(huì)有提示的。所以后面你愛(ài)咋折騰咋折騰，我在這里不廢話了。
?
最后讓我們來(lái)測(cè)試一下LESS是否能成功編譯
先在test.less文件上寫下這么一段代碼...
@red: #ff0000; .aa {color: @red; }然后手動(dòng)觸發(fā)LESS編譯，沒(méi)多久CSS輸出目錄中的同名CSS文件里輸出了這樣的結(jié)果...（PS：如果同名的CSS文件還沒(méi)有創(chuàng)建，編譯器會(huì)幫我們自動(dòng)創(chuàng)建一個(gè)的）
.aa {color: #ff0000; }Nice！編譯成功！至此大功告成。
?
上面的方法是我目前用過(guò)的最簡(jiǎn)便的方法了。不過(guò)有一個(gè)弊端是依賴Webstrom及其插件，對(duì)于開(kāi)發(fā)工具統(tǒng)一化的團(tuán)隊(duì)來(lái)說(shuō)會(huì)比較適合。
但如果是一些比較大的團(tuán)隊(duì)，成員所用開(kāi)發(fā)工具并不統(tǒng)一的話，那就不好推廣了。
這時(shí)候，我們可以考慮更通用的做法，比如通過(guò)grunt的grunt-contrib-less和grunt-contrib-watch工具。
這里就不再對(duì)這種做法進(jìn)行細(xì)述了，網(wǎng)上關(guān)于grunt使用的學(xué)習(xí)資料多不勝數(shù)，如有需要自行研究吧。
轉(zhuǎn)載于:https://www.cnblogs.com/czf-zone/p/4355507.html
總結(jié)
以上是生活随笔為你收集整理的【LESS系列】简介和使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 使用ab对站点进行压力测试
- 下一篇： Android 4.4及以上系统下应用的