安裝 ruby, sass 和 compass

sass 是一個 css 的預處理器, 簡寫css, 以及CSS的導航, sass 基於 ruby, 須要先安裝 ruby 而後在安裝 sass

安裝 Ruby

目的是 安裝 sass, 能夠快速的訪問本地源

安裝

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

mac
自帶

centos

$ yum install ruby

ubuntu

$ apt-get install ruby

更換 ruby 源

參見 https://gems.ruby-china.org/

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://gems.ruby-china.org/
$ gem sources -l

安裝 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/down...' and follow the instructions
at 'http://github.com/oneclick/ru...'

下載 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

sass @import 「compass/reset」 error

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 命令來監控文件的變更了

變動記錄

• 2015年11月27日 更換爲 淘寶https 源