在webstorm下使用compass 和 sass

一直想玩sass，但發現這玩意彷佛在linux下使用的，而我這樣的只是側重前端的人玩linux作啥，最好是所見即所得，省時間精力！後來百度了下網上，幾乎不少方法都是錯的，後來經過這些方法的啓發，居然研究成功了，因此寫下方法備註一下。

以前爲了進階css，狠抓了一下sass（如今叫scss，編程風格和css相似）和它的框架compass，因爲本人對命令行的恐懼，所以總想將其弄到IDE中。

先安裝ruby，sass，compass。

先在這裏下載ruby 我下載的是最新版的ruby

Ruby安裝包下載地址：http://rubyinstaller.org/downloads/下載對應系統版本的安裝包；

二、雙擊rubyinstaller-2.2.3-x64.exe開始安裝，以下圖所示安裝;

三、檢查是否安裝成功win+r輸入cmd回車打開終端輸入ruby -v；

Gem的使用方法

安裝完Ruby實際上已經安裝好了gem，經過win+r輸入cmd回車打開終端。

查看已經安裝的gem軟件

 

gem list

下面安裝sass

gem install sass

 

按回車鍵確認，等待一段時間就會提示你sass安裝成功。最近由於牆的比較厲害，若是你沒有安裝成功，那麼請參考下面的淘寶的RubyGems鏡像安裝sass，若是成功則忽略。

若是要安裝beta版本的，能夠在命令行中輸入

gem install sass --pre

你還能夠從sass的Git repository來安裝，git的命令行爲

git clone git://github.com/nex3/sass.git
cd sass
rake install

升級sass版本的命令行爲

gem update sass

查看sass版本的命令行爲

sass -v

你也能夠運行幫助命令行來查看你須要的命令

sass -h

淘寶RubyGems鏡像安裝 sass

因爲國內網絡緣由（你懂的），致使 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性鏈接失敗。這時候咱們能夠經過gem sources命令來配置源，先移除默認的https://rubygems.org源，而後添加淘寶的源https://ruby.taobao.org/，而後查看下當前使用的源是哪一個，若是是淘寶的，則表示能夠輸入sass安裝命令gem install sass了，關於經常使用gem source命令可參看：經常使用的gem source

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【若是你係統不支持https，請將淘寶源更換成：gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 請確保只有 ruby.taobao.org
$ gem install sass

 安裝compass

gem install compass

Compass使用方法

一、建立項目 首先經過命令行進入你要建立項目的文件夾。cd\回到根目錄 cd ** 進入某個文件夾。

 

compass create myproject

 

二、配置config.rg 主要是對壓縮比例。

#壓縮比例output_style = (environment == :development) ? :expanded : :compresse

 

三、實時編譯sass Compass實時監控Sass目錄的文件變化，只要保存文件當即將對應文件編譯成css文件

 

compass watch

webstrom2016設置

可能有人會問爲啥裝的是sass，而下面選擇的倒是scss呢，這是由於

SCSS是最新版的SASS後綴

.啓動WebStorm，打開已有項目，建立一個scss文件。

    這是在右上角會顯示Add Watcher按鈕，點擊它，在彈出的對話框中，將Program的路徑設爲Ruby中scss.bat的路徑。

也能夠修改css的輸出路徑等等。

另外也能夠設置全局的監聽

• 若是你想用SCSS，而且Ruby是安裝在默認路徑下，那麼」File Type:「和」Program：「那裏的設置就和我同樣；

• 若是是用SASS，那麼你在新建時應該選擇SASS的類型，」Program：「也應該選」sass.bat「。

 

    主要步驟已經完成，如今在咱們修改scss文件的時候，webstorm會爲咱們自動生成對應的css文件，別忘記在html中引入這個css文件。

 

    測試修改ionic的主題顏色，在以前建立的scss文件中添加如下內容並運行。

1. $positive: #00FF00;  
2.   
3. @import "../lib/ionic/scss/ionic";  

 

    就會發現以前使用藍色positive的內容所有變成了綠色。

上面設置好後，在scss文件中隨便寫點東西看能生成不，對了，它但是自動生成css文件哦。

固然正確寫完後，裏面還有一個map文件

能夠參考這裏http://www.sass.hk/install-sass.html