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