Less的安裝與配置
Less與Sass
先說一段題外話，不少初學者在選擇CSS 預處理語言難免會感到猶豫，做爲CSS 的兩大預處理語言Less與Sass，各自都有着很普遍的使用羣體，我究竟該選哪一個好呢？css
通過了幾個項目的使用和對比，我最終仍是選擇了Less。對我來講，我只想安安靜靜地寫寫CSS，雖然Sass結合Compass爲我提供了循環、邏輯判斷語句以及大量的函數(Mixin)，但到了實際的項目中，這些「花哨」的功能真就沒用過幾回。試想一下要你調一個按鈕:active時的顏色，你是直接經過Chrome的審查元素去調，仍是用lighten、desaturate這些顏色操做函數一次一次地去試。實戰中用的最多的也就只有CSS選擇器的嵌套，與繼承，而這些Less也都爲我提供了，使用起來也比Sass更方便。html
Less的安裝與配置
1.經過koala
若是你是一個「高手」，酷愛記事本，那麼koala必定很適合你。koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。前端
使用的時候直接將文件夾拖拽到Koala界面，便可添加項目。如項目目錄下有新增文件，點擊文件列表上方的刷新按鈕，將自動添加新文件。編輯完成保存後Koala就會爲你自動編譯。node
2.使用WebStorm集成開發環境
WebStorm的配置過程稍微有點複雜。linux
1.安裝Node.JS
因爲Less是使用JS開發的，因此Less運行時依賴Node.JS，若是你電腦以前沒有安裝過Node.JS，還需下載安裝Node.JS。css3
安裝過程都是一路下一步。安裝完成後打開控制檯輸入node -v，若是能顯示出版本號就說明，安裝成功了。git
2.替換淘寶鏡像 CNPM
因爲長城牌防火牆的緣由，可能NPM（Node.js的包管理工具）沒法訪問到服務器，這時就可替換成淘寶的NPM鏡像。github
打開控制檯直接輸入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
MAC平臺前面還需加一個sodoweb
3.安裝Less
打開控制檯直接輸入：
cnpm install -g less
接着輸入lessc -v能看到版本號就表示安裝成功了npm
4.添加File Watchers
打開WebStorm，點擊文件—>設置—>File Watchers—>右邊的+號
program：你Node安裝路徑下的lessc.cmd
arguments：--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$
working directory：$FileDir$
output paths to refresh：$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
以後你只要在項目中添加一個.less文件，系統就會自動爲你編譯了。
3.配置Autoprefixer
之前用Sass，一個最主要的緣由就是煩人的CSS廠商前綴，有了Autoprefixer你就不再用爲這些雜事而發愁了。
Autoprefixer是一個後處理程序，不象Sass以及Stylus之類的預處理器。它適用於普通的CSS，能夠實現css3代碼自動補全。也能夠輕鬆跟Sass，LESS及Stylus集成，在CSS編譯前或編譯後運行。詳情見，https://github.com/postcss/autoprefixer
當Autoprefixer添加前綴到你的CSS，還不會忘記修復語法差別。這種方式，CSS是基於最新W3C規範產生
1.安裝Autoprefixer
打開控制檯直接輸入：
cnpm install autoprefixer -g
安裝完後接着輸入：
cnpm install postcss-cli -g
2.配置External Tools
打開Webstorm 文件 -> 設置 -> 外部工具 點擊新增按鈕，如圖：
填寫具體配置，例如個人配置，如圖：
Program:填入你的postcss.cmd 的PATH；(通常在node安裝目錄下)
Parameters: -u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$
Working directory :$ProjectFileDir$
配置好後，你能夠在css，或less文件中右擊，就能夠在右鍵菜單中看到External Tools – Autoprefixer。