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