預編譯器配置說明
開頭語，發揮CSS預處器的作用是一種很有挑戰性的事情。CSS預處器有不同的語言，就有不同的語法和功能。
語法
在使用CSS預處器之前最重要的是對語法的理解，幸運的是，這三種CSS預處器的語法和CSS都差不多。
- Sass和LESS都使用的是標准的CSS語法。這使用CSS預處器非常容易的將預處器代碼轉換成CSS代碼。默認Sass使用“.scss”擴展名，而LESS使用“.less”擴展名；
- 重要的一點是，Sass也同時支持老的語法,就是不使用花括號和分號，而且文件使用“.sass”擴展名；
- Stylus的語法花樣多一些，它使用“.styl”的擴展名，Stylus也接受標准的CSS語法，但是他也接受不帶花括號和分號的語法。
SASS預編譯器配置
首先介紹的是.scss的配置：
根據實際操作的過程，總結以下步驟：（限window系統）
1、下載RubyInstaller，運行安裝（只管點擊next即可）。
本文下載的是下圖的的文件
然后直接雙擊，進行安裝，選擇安裝目錄，順便勾選上添加到環境變量（個人建議）如下圖
2、安裝完成
打開命令行，ruby -v查看下吧，安裝成功
現在ruby安裝成功了，接下來就是配置scss開發環境了：
打開cmd，在命令行中輸入：
gem insall sass
出現下圖中第一個紅框中的內容，說明sass安裝成功。
如果你還不放心，可以輸入如下命令看下sass的版本號。
sass -v
如上圖中第二個紅框中的內容。
至此sass安裝成功。
配置webstorm中scss：
先在菜單欄選擇File ---->>>> Settings.... 如下圖
在settings中搜索file watchers工具，在此工具中添加一個scss的watcher，按照下圖設置各項。點擊ok
這樣webstorm中scss配置好了。
建個scss文件試試如下圖，寫個簡單的scss代碼進行測試如下圖
會自動生成對應的css文件。如下圖：
剛才如果沒修改Output paths，那么按照默認的路徑會在.scss文件同目錄下實時產生修改過的.css文件。
ps：項目所在的路徑中請不要出現中文，不然sass在編譯是會出現編碼錯誤的哦。
下面講解配置SASS（這是老的語法）
首先不用安裝其他軟件了，因為其實剛才在配置scss的時候已經將老版本的sass安裝到ruby 下面的bin目錄下了，如下截圖
其他不用配置，我們直接進入Webstorm File ------------->>>> Settings... -------->>>>File Wachers 按下圖進行配置
好了，到這兒SCSS和SASS的開發環境就已經搭建成功了。
搭建好了還不行，最好進行測試一下，建立一個.sass的文件：
接着我們可以實時看到同級目錄下有個同名的css文件生成，這個文件就是sass文件編譯生成的，如下圖
下面進行講解Stylus預編譯環境的搭建：
要搭建這個環境，我們首先是要先安裝nodeJs
我們先下載安裝文件下載地址：官網http://www.nodejs.org/download/
根據自己電腦配置下載對應的版本進行安裝
步驟 1 : 雙擊下載后的安裝包 v0.10.26，如下所示：
步驟 2 : 點擊以上的Run(運行)，將出現如下界面：
步驟 3 : 勾選接受協議選項，點擊 next（下一步） 按鈕 :
步驟 4 : Node.js默認安裝目錄為 "C:\Program Files\nodejs\" , 你可以修改目錄，並點擊 next（下一步）：
步驟 5 : 點擊樹形圖標來選擇你需要的安裝模式 , 然后點擊下一步 next（下一步）
步驟 6 :點擊 Install（安裝） 開始安裝Node.js。你也可以點擊 Back（返回）來修改先前的配置。 然后並點擊 next（下一步）：
安裝過程：
點擊 Finish（完成）按鈕退出安裝向導。
檢測PATH環境變量是否配置了Node.js，點擊開始=》運行=》輸入"cmd" => 輸入命令"path"，輸出如下結果：
PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32; C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\; c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib; C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\; C:\Users\rg\AppData\Roaming\npm
我們可以看到環境變量中已經包含了C:\Program Files\nodejs\
檢查Node.js版本
然后我們進行 Stylus的安裝，在cmd中輸入以下命令：
npm install stylus
此時，表示Stylus安裝成功，如果你還有疑問的話，請在安裝目錄下可以找到下圖中紅色區域中的文件
接下來我們就可以在WebStorm中對Stylus的開發環境進行配置了
我們直接進入Webstorm File ------------->>>> Tools... -------->>>>File Wachers 按下圖進行配置
接下來就是測試我們大家的Stylus環境是否生效，首先新建一個 .stylus 的文件 如下圖
接着我們可以實時看到同級目錄下有個同名的css文件生成，這個文件就是 .stylus文件編譯生成的，如下圖
好了，大功告成，這個配置我們就做好了。
最后我們搭建LESS的編譯環境
less和Stylus的安裝一樣，同樣依賴於Node JS的環境，也就是說也要先安裝Node Js（如果安裝Node JS請參考前面的介紹）。唯一不同的是在Node JS的Command控制面板輸入的命令不一樣：
npm install less
這樣就安裝完LESS的編譯命令，可以在本地正常編譯LESS源文件。如果您想下載最新穩定版本的LESS，還可以嘗試在Node JS的Command控制面板輸入：
$ npm install less@latest
當安裝完了以后，可以在安裝目錄下找到下圖中我文件
然后就是在WebStorm中搭建Less編譯環境如下圖
接着還是老規矩，測試一下，如下圖創建一個 .less文件
接着我們可以實時看到同級目錄下有個同名的css文件生成，這個文件就是 .less文件編譯生成的，如下圖
到此，大功告成，三種主流的CSS預編譯語言開發環境搭建成功。
如有不好的地方，歡迎各位提建議意見。
===========================================================================
如果覺得對您有幫助，微信掃一掃支持一下：
參考文章：
http://caibaojian.com/sass-less-stylus.html
http://www.runoob.com/nodejs/nodejs-install-setup.html
http://blog.csdn.net/ernijie/article/details/51672346
http://www.cnblogs.com/fxair/p/3708099.html
https://segmentfault.com/q/1010000001915391