Sass & Compass 初步使用

一、需安装的东西

• ruby（mac自带）

• gem（sources可能被墙）

• sass

• compass

查看安装情况：

ruby -v
gem -v
sass -v
compass -v

查看 gem 的 sources：

gem sources

可参考资料

• 如何安装 Ruby、Sass、Compass（Windows，使用 Ruby China 镜像）

二、实操

1. 使用终端进入选定的目录

2. compass 初始化

3. sass 编写

针对1：

• mac可能用到的命令：

cd xxx
ls

• win可能用到的命令：

E：
cd xxx
dir

针对2：

• 进入到特定目录后，输入命令：

compass init    // 方式1
compass create [project_name]    // 方式2，会创建一个以project_name命名的compass目录

• config.rb是compass目录的配置文件，可根据个人需求修改（重要）

针对3：

• 体验sass的强大吧（与css比较）

// reset
@import "compass/reset";

// css3圆角
@import "compass/css3";
.box{
    @include border-radius(5px);
}

// css3渐层
.box{
    @include background(linear-gradient(lighten(red, 20%), red)); 
}

// sprite
@import "icons/*.png";
@include all-icons-sprites;  //all-后面的‘icons’代表文件夹名字

• compass会监测目录下文件变动而进行实时编译（可能需要watch一下）

可参考资料：

• 用強大的compass+sass寫css