安装 ruby, sass 和 compass-白红宇

安装 ruby, sass 和 compass

阅读量：6946 次

发布时间：2019-06-27

本文共 2146 字，大约阅读时间需要 7 分钟。

sass 是一个 css 的预处理器, 简写css, 以及CSS的导航, sass 基于 ruby, 需要先安装 ruby 然后在安装 sass

安装 Ruby

目的是安装 sass, 可以快速的访问本地源

安装

windows

使用 rubyinstall 安装 ruby

官方网站:

mac

自带

centos

$ yum install ruby

ubuntu

$ apt-get install ruby

更换 ruby 源

参见

$ 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 '' and follow the instructions
at ''

下载 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 命令来监控文件的变动了