安装 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 源