webstorm 設置 sass自動編譯問題

　　sass語法、使用它帶來的好處，就再也不這裏作介紹了，主要看怎麼在webstorm裏配置自動編譯。

　　sass編譯是須要Ruby環境的，能夠到這裏去下載  :  https://rubyinstaller.org/downloads/     ,安裝時選擇加入Path

     

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

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

如上已經安裝成功，Ruby自帶一個叫作RubyGems的系統，用來安裝基於Ruby的軟件。由於國內網絡的問題致使gem源間歇性中斷所以咱們須要更換gem源。（使用淘寶的gem源https://ruby.taobao.org/ ）

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

//2.添加國內淘寶源
gem sources -a https://ruby.taobao.org/

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

//4.更換成功後打印以下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

個人機器上因爲https的問題加沒法訪問淘寶源，我把它換成了騰訊源 ，騰訊源地址：  http://gems.ruby-china.com/

咱們下面來安裝Sass和Compass。要安裝最新版本的Sass和Compass，你須要輸入下面的命令：

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

在每個安裝過程當中，你都會看到以下輸出：

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安裝完成以後，你應該經過運行下面的命令來確認應用已經正確地安裝到了電腦中：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass幫助
sass -h

下面打開webstorm, File -> Settings -> Tools -> File Watchers + -> SCSS

 

 　　在這裏  File Type  配置爲  Scss Style Sheet   ,不要配置爲 SASS style sheet 。SCSS 是 Sass 3 引入新的語法，其語法徹底兼容 CSS3，而且繼承了 Sass 的強大功能。也就是說，任何標準的 CSS3 樣式表

都是具備相同語義的有效的 SCSS 文件。另外，SCSS 還能識別大部分 CSS hacks（一些 CSS 小技巧）和特定於瀏覽器的語法

        Progarm: Ruby SaSS 擴展路徑

C:\Ruby25-x64\bin\sass.bat

 

　　 Arguments:配置編譯參數

--no-cache --update -t compact $FileName$:$FileNameWithoutExtension$.css

-t 後面有4種參數可選：

• 嵌套輸出方式 nested 它是默認值
• 展開輸出方式 expanded
• 緊湊輸出方式 compact
• 壓縮輸出方式 compressed 生產環境當中通常使用這個

　　Output paths to refresh：文件輸出路徑

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

配置完畢，添加一個 .scss文件，果真自動編譯成了.css文件。

參考文檔：  Sass官網

　　　　　  webstorm設置sass自動編譯,及參數配置