sass结合compass使用（图文）

Sass依赖Ruby，所以，首先得先安装个Ruby

Sass的安装步骤：

1.安装Ruby的时候，勾上 Add Ruby executables to your PATH 选项（添加环境变量）

2.安装好了Ruby之后，在开始菜单中找到Ruby，打开“Start Command Prompt With Ruby”

命令行中输入 gem install sass ，回车确认之后，等待一段时间。

由于墙的原因，国内基本都是安装失败，继续3，如果安装成功，直接跳到4

3.安装失败，采取下面的办法（淘宝镜像）

命令行依次输入

gem sources --remove https://rubygems.org/

gem sources -a https://ruby.taobao.org

gem sources -l

确保只有 ruby.taobao.org，接着输入

gem install sass

等待一段时间，安装成功。

ps：可以用sass -v 查看sass是否安装成功

4.安装compass

命令行输入

gem install compass

等待一段时间，安装成功。

ps：可以用compass -v 查看compass是否安装成功

5.使用sass

项目sass目录中创建两个文件

base.scss和config.rb

config.rb配置如下：

<span style="white-space:pre">	</span># 引入compass
<span style="white-space:pre">	</span>require 'compass/import-once/activate'
<span style="white-space:pre">	</span># 配置路径
<span style="white-space:pre">	</span>http_path = '/'
<span style="white-space:pre">	</span>css_dir = '../styles'
<span style="white-space:pre">	</span>sass_dir = '../sass'
<span style="white-space:pre">	</span>sourcemap = true
<span style="white-space:pre">	</span>cache = false

ps：配置信息注意路径

6.使用compass

在当前目录下（sass目录），Shift +  鼠标右键，选择 "在此处打开命令窗口(W)"

输入compass watch

在项目styles目录中自动创建了两个文件 base.css 和 base.css.map

当你修改 base.scss文件并保存的时候，base.css文件也相应地改变了

以上，OVER

更多关于sass的信息请参考SASS

PS：csdn吃了好多图片，就辛苦下看看文字吧。