WIN7 系統安裝 ruby 並使用 sass

標籤：style   blog   http   使用   os   檔案   2014   問題   

前不久朋友跟我說 sass 寫 css 很不錯，我就試著去用了，那麼在使用 sass 的時候發現安裝也是要點時間，那麼我就整理了一下這些安裝和使用的一些東西，分享一下，讓想用 sass 寫 css 的同學少走一些安裝彎路，在這裡僅僅適合 windows 下安裝方式（Linux或OS X 請移步），好了廢話不多說直接進入主題

 

1. 先下載ruby程式包並安裝 (這裡安裝的是 1.8.7 版本 ) 安裝時請把下面三個框勾上,：http://dl.dbank.com/c0e1b2ptmk

 

 

2. 開啟 Ruby 的命令符面板（ruby的黑視窗） 並輸入 gem install haml（等待幾秒鐘會出現安裝過程） 和 gem installsass

 

3. Sass是一種"CSS前置處理器"，可以讓CSS的開發變得簡單和可維護。但是，只有搭配Compass，它才能顯出真正的威力， 所以現在我們來使用 Compass 。開啟命令列（系統的黑視窗）輸入 gem install compass (其實這行命令應該可以在第二步的時候一起輸入的，這裡我就沒 試了，有興趣的同學可以去試一下)  在這裡可以參考一下這個高手的部落格 http://www.ruanyifeng.com/blog/2012/11/compass.html

 

4. 激動人心的時刻來了，建立sass檔案，我打算在 E 盤建立一個 myproject 檔案夾 , 那麼在黑視窗裡面輸入 compass create myproject（檔案名稱）

 

 

5.接下來使 sass 檔案自動編譯跟 CSS 同步，在黑視窗輸入命令列 compass watch

 

 

6.在myproject檔案夾建立一個 sass 檔案 取名為 style.scss ,此時你就會發現，在stylesheets 這個檔案夾裡面就同步了一個style.css檔案，那麼在項目使用中你就可以引用這個style.css檔案了，而你編寫的就是style.scss檔案

 

 

7.在 sublime text 中編寫的 sass 代碼不會高亮，那麼需要一個外掛程式在這個好人的部落格裡下載此外掛程式 http://www.csssea.com/?p=1818 , 把下載好的外掛程式解壓，提取第二層檔案（既所示）粘貼到 sublime text 的瀏覽程式包裡面的 Emmet 檔案裡（記得粘貼到裡面的檔案，不要把檔案覆蓋，不然sublime tex會出現問題），重啟一下 sublime text 此時久違的感覺就回來了，接下來的事情就是盡情釋放你的 sass 代碼吧...