Sass 是一种"CSS预处理器"，可以让 CSS 的开发变得简单和可维护。但是，只有搭配 Compass，它才能显出真正的威力。 本文介绍Compass的用法。毫不夸张地说，学会了 Compass，你的 CSS 开发效率会上一个台阶。
一、Compass是什么？
简单说，Compass 是 Sass 的工具库（toolkit）。
Sass 本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像 Javascrip t和 jQuery、Ruby 和 Rails、python和 Django 的关系。
二、安装
Compass 是用 Ruby 语言开发的，所以安装它之前，必须安装 Ruby。
假定你的机器（Linux或OS X）已经安装好 Ruby，那么在命令行模式下键入：
sudo gem install compass
三、项目初始化
接下来，要创建一个你的 Compass 项目，假定它的名字叫做 myproject，那么在命令行键入：
compass create myproject
当前目录中就会生成一个 myproject 子目录。
进入该目录：
cd myproject
你会看到，里面有一个 config.rb 文件，这是你的项目的配置文件。还有两个子目录 sass 和 stylesheets，前者存放 Sass 源文件，后者存放编译后的 css 文件。
接下来，就可以动手写代码了。
四、编译
在写代码之前，我们还要知道如何编译。因为我们写出来的是后缀名为 scss 的文件，只有编译成 css 文件，才能用在网站上。
Compass的编译命令是
compass compile
该命令在项目根目录下运行，会将 sass 子目录中的 scss 文件，编译成 css 文件，保存在 stylesheets 子目录中。
默认状态下，编译出来的 css 文件带有大量的注释。但是，生产环境需要压缩后的 css 文件，这时要使用 --output-style 参数。
compass compile --output-style compressed
Compass 只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用 --force 参数。
compass compile --force
除了使用命令行参数，还可以在配置文件 config.rb 中指定编译模式。
output_style = :expanded
:expanded 模式表示编译后保留原格式，其他值还包括:nested、:compact和 :compressed。进入生产阶段后，就要改为 :compressed模式。
output_style = :compressed
也可以通过指定 environment 的值（:production 或者 :development ），智能判断编译模式。
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下，除了一次性编译命令，compass 还有自动编译命令
compass watch
运行该命令后，只要 scss 文件发生变化，就会被自动编译成 css 文件。
更多的 compass 命令行用法，请参考官方文档。
五、Compass的模块
Compass 采用模块结构，不同模块提供不同的功能。目前，它内置五个模块：
- reset
- css3
- layout
- typography
- utilities
下面，依次介绍这五个内置模块。它们提供 Compass 的主要功能，但是除了它们，你还可以自行加载网上的第三方模块，或者自己动手编写模块。
六、reset模块
通常，编写自己的样式之前，有必要重置浏览器的默认样式。 写法是
@import "compass/reset";
上面的 @import 命令，用来指定加载模块，这里就是加载 reset 模块。编译后，会生成相应的 css reset 代码。
七、CSS3模块
目前，该模块提供19种 CSS3 命令。在这里，我介绍其中的三种：圆角、透明和行内区块。
7.1 圆角
圆角（border-radius）的写法是
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
上面的 @include 命令，表示调用某个 mixin（类似于C语言的宏），5px 是参数，这里用来指定圆角的半径。
编译后的代码为
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
如果只需要左上角为圆角，写法为
@include border-corner-radius(top, left, 5px);
7.2 透明
透明（opacity）的写法为
@import "compass/css3";
#opacity {
@include opacity(0.5);
}
编译后生成
#opacity {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity: 0.5;
}
opacity 的参数 0.5，表示透明度为 50%。
完全透明的写法是
@include opacity(0);
完全不透明则是
@include opacity(1);
7.3 行内区块
行内区块（inline-block）的写法为
@import "compass/css3";
#inline-block {
@include inline-block;
}
编译后生成
#inline-block {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}
八、layout模块
该模块提供布局功能。
比如，指定页面的 footer 部分总是出现在浏览器最底端：
@import "compass/layout";
#footer {
@include sticky-footer(54px);
}
又比如，指定子元素占满父元素的空间：
@import "compass/layout";
#stretch-full {
@include stretch;
}
九、typography模块
该模块提供版式功能。
比如，指定链接颜色的 mixin 为：
link-colors($normal, $hover, $active, $visited, $focus);
使用时写成：
@import "compass/typography";
a {
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}
十、utilities模块
该模块提供某些不属于其他模块的功能。
比如，清除浮动：
import "compass/utilities/";
.clearfix {
@include clearfix;
}
再比如，表格：
@import "compass/utilities";
table {
@include table-scaffolding;
}
编译后生成
table th {
text-align: center;
font-weight: bold;
}
table td,
table th {
padding: 2px;
}
table td.numeric,
table th.numeric {
text-align: right;
}
十一、Helper函数
除了模块，Compass 还提供一系列函数。
有些函数非常有用，比如 image-width() 和 image-height() 返回图片的宽和高。 再比如，inline-image() 可以将图片转为 data 协议的数据。
@import "compass";
.icon { background-image: inline-image("icon.png");}
编译后得到
.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}
函数与 mixin 的主要区别是，不需要使用 @include 命令，可以直接调用。