windows下的SASS/Compass的安裝與卸載

認識SASS/Compass

SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。

SASS與Compass的安裝說明

SASS在Windows操做系統內依賴於Ruby環境，所以在安裝SASS以前：

一、須要先安裝Ruby。Ruby現階段的安裝與通常應用程序安裝沒有太大區別，環境變量等由安裝程序自行設置。

二、Ruby環境內有個包管理器——GEM，它相似於Nodejs下的NPM，它隨着Ruby一塊兒被安裝，所以不須要額外安裝。

安裝 Ruby

使用 rubyinstall 安裝 ruby
官方網站: http://rubyinstaller.org/

安裝好以後須要對ruby換源，由於國內你懂的，參見 https://ruby.taobao.org/  操做以下 ：

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

若是在換源時提示以下錯誤信息：

這是ruby沒有包含SSL證書，因此Https的連接被服務器拒絕，解決方法很簡單，首先在這裏下載證書(http://curl.haxx.se/ca/cacert.pem), 或者在瀏覽器裏把這個文件內容複製(或者點擊此處下載)，服務器建立一個新文件cacert.pem，內容粘貼進去，而後再環境變量裏設置SSL_CERT_FILE這個環境變量，在系統的環境變量裏設置SSL_CERT_FILE這個環境變量，並把value指向這個文件，退出命令行窗口 從新執行添加命令便可

安裝 sass

gem install sass

測試運行編譯

sass test.scss test.css
  --style
   #  nested：嵌套縮進的css代碼，它是默認值
   #  expanded：沒有縮進的、擴展的css代碼。
   #  compact：簡潔格式的css代碼。
   #  compressed：壓縮後的css代碼。

# watch a file
sass --watch input.scss:output.css
# watch a directory
sass --watch ap/some:some/name

安裝compass

gem install compass

建立項目

compass create my-project
cd my-project
compass watch

常見錯誤

建立 compass 項目報錯

compass create my-project

「Errno::EACCES on line [」897「] of C: Permission denied」
LoadError on line ["55"] of D: cannot load such file -- compass/import-once/activate

解決方法：

// uninstall 
gem uninstall sass
gem uninstall compass

// install pre version
gem install compass --pre
gem install sass --pre

使用 compass 監控項目變更

compass watch

LoadError on line ["55"] of D: cannot load such file -- wdm

解決方法
安裝 wdm

gem install wdm

安裝 wdm 出錯

ERROR: Error installing wdm: The 'wdm' native gem requires installed build tools.
Please update your PATH to include build tools or download the DevKit
from 'http://rubyinstaller.org/downloads' and follow the instructions
at 'http://github.com/oneclick/rubyinstaller/wiki/Development-Kit'

解決方法

下載  devKit 包 而後根據 上邊給出的地址進行 devKit的安裝

從新安裝 wdm

 

Temporarily enhancing PATH to include DevKit...
Building native extensions. This could take a while...
Successfully installed wdm-0.1.0
Parsing documentation for wdm-0.1.0
unable to convert "\x90" from ASCII-8BIT to UTF-8 for ../../extensions/x64-mingw
32/2.0.0/wdm-0.1.0/wdm_ext.so, skipping
unable to convert "\x90" from ASCII-8BIT to UTF-8 for lib/wdm_ext.so, skipping
1 gem installed

後記，先按照通常的方法安裝，在通常方法出錯狀況下再安裝以上的方法 例如 --pre

use compass watch instead of sass --watch sass:stylesheets. If you're using compass, you don't need to bother with sass command. Just use the compass command.

這裏說的是你若是使用compass 就不要是用 sass 命令來監控文件的變更了