安裝Ruby、Sass在WebStrom配置Scss編譯環境css自動壓縮

安裝Sass和Compass

sass基於Ruby語言開發而成，所以安裝sass前須要安裝Ruby。（注:mac下自帶Ruby無需在安裝Ruby!）

window下安裝SASS首先須要安裝Ruby，先從官網下載Ruby並安裝。安裝過程當中請注意勾選Add Ruby executables to your PATH添加到系統環境變量。以下圖：

安裝完成後需測試安裝有沒有成功,運行CMD輸入如下命令：

ruby -v
//如安裝成功會打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

如上已經安裝成功。但由於國內網絡的問題致使gem源間歇性中斷所以咱們須要更換gem源。（使用淘寶的gem源https://gems.ruby-china.com）以下：

這裏使用 https://gems.ruby-china.com  淘寶目前不能用  https://ruby.taobao.org/

//1.刪除原gem源
gem sources --remove https://rubygems.org/

//2.添加國內源
gem sources -a https://gems.ruby-china.com

//3.打印是否替換成功
gem sources -l

//4.更換成功後打印以下
*** CURRENT SOURCES ***
https://gems.ruby-china.com

Ruby自帶一個叫作RubyGems的系統，用來安裝基於Ruby的軟件。咱們能夠使用這個系統來 輕鬆地安裝Sass和Compass。要安裝最新版本的Sass和Compass，你須要輸入下面的命令：

//安裝以下(如mac安裝遇到權限問題需加 sudo gem install sass)
gem install sass
gem install compass

Webstorm 上配置 SASS 監聽器

添加 Compass SCSS 模板

 

默認值(默認生成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