安裝Ruby、Sass在WebStrom添加Watcher實現編輯scss文件時自動生成.map和壓縮後的.css文件

前言

這段時間一直在看Bootstrap，V3官方直接提供了Less版本的源碼，就先將Less學完了，很簡單的語法，學習寫Demo都是在Webstorm裏寫的，配置了Watcher自動編譯（詳見《在WebStorm裏配置watcher實現編輯less文件時自動生成.map和壓縮後的.css文件》）。 
隨着學習的加深，開始接觸Sass了，Bootstrap V3也提供了Sass的源碼，並且V4官方就只提供Sass的源碼，從側面證實Sass的流行趨勢，畢竟Sass功能更全面，所以筆者決定之後就使用Sass了（新版本叫Scss）。

 

一、下載rubyinstaller-2.3.3-x64.exe 安裝（從官網下載，或者從這裏連接：http://pan.baidu.com/s/1o7BxbR0 密碼：rctf），注意，安裝過程當中下面的設置。 

 
二、安裝完成後用命令檢查是否安裝成功，成功會顯示版本信息。

ruby -v gem -v

• 1
• 2

• 1
• 2

 
三、安裝Sass

gem install sass

• 1

• 1

安裝完後，C:\Ruby23-x64\bin裏將有下面的文件。 
 
四、Webstorm裏添加Watcher 
同Less相似，在工程裏新建scss文件時會自動顯示【Add Wather】,若是沒有提示，也能夠經過【文件(File)】-【設置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【SCSS】打開New Watcher配置界面。 
 
默認值(默認生成css 和 css.map)

參數名	參數值(下面no和update前是兩個」-「)
Program	C:\Ruby23-x64\bin\scss.bat
Arguments	–no-cache –update $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh	$FileNameWithoutExtension$.css

修改後（生成壓縮後css）

參數名	參數值(下面no和update前是兩個」-「)
Program	C:\Ruby23-x64\bin\scss.bat
Arguments	–no-cache –update -t compressed $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh	$FileNameWithoutExtension$.css

很簡單，比Less還要簡單。寫一段scss代碼試試。 

補充： 
參數值裏，-t 後面能夠配置的值

值	結果
nested	嵌套
expanded	展開
compact	每句一行
compressed	壓縮