很多设计师使用某种形式的CSS预处理器，不管是Sass，或Stylus。如果你使用过这些，你大概也知道，Compass是一个框架，建立在Sass，虽然它的安装可能会倒胃口，一旦你使用它，你很快就会发现，这是最好的工具之一，任何网页设计师可以学习。
如果你从来没有使用Sass，我建议先看一看Sass的介绍 。
Compass 就是Sass的一个框架。当你在进行一个大型项目的架构的时候遇到一些你力所能及的问题的时候，CSS就是一个挑战。Compass试图解决这些问题。
Compass是什么？
正如我上面所说，Compass是一个框架，协助CSS解析语言的一些问题。它还包括一些工具，使开发更快，更容易：
1、像Sass，Compass支持变量，混入和嵌套功能;
2、 它提供了一系列的图像，颜色，排版和更多的辅助功能;
3、它支持数学计算;
4、它有助于确保跨浏览器兼容性。
Sass和其他网页设计工具一样，Compass是只是一种工具，使网站的设计更简单。
如何安装Compass
Compass是一个动态语言包，所以为了安装它，你首先需要在你的电脑上安装动态语言程序。幸运的是，动态语言的 安装很简单，在Windows上，你只需根据网站的操作提示下载这个动态语言程序的Windows安装包并安装到你的电脑上即可。
一旦你已经安装动态语言，安装Compass一样容易：
gem install compass
这将即同时安装了Compass和Sass两个程序。
如果你希望创建一个Compass项目，只要键入：
compass create /path/to/project cd /path/to/project compass watch
这三行代码的意思是，任何时候你只要改变了Sass文件，他们都将会被自动编译成CSS。
或者，您可以使用Codekit（Mac）或Prepros（Windows）中保存时选择将文件保存为Sass文件。
Compass入门
Compass分为模块，因而在开始进行设计操作之前我们首先需要我们想要的模块导入到我们的面板SCSS文件上。例如，我们使用CSS3模块导入：
@import "compass/css3";
现在我们可以开始使用Compass提供的新特性，来导入css3并进行使用。这样做的好处是我们不必要像css3那样一遍又一遍地键入芯片供应商代码。
下面我们来看一下如何使用Compass设计一个20px的3栏布局，在css中设计的时候我们需要键入以下代码：
div { -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; }
但是借助于Compass和Sass我们仅仅需要键入以下内容：
div
{
@include column-count(3);
@include column-gap(20px);
}
你可以发现Compass是如何的快速与完整。正如你所看到的那样，Compass去除了一些计算机专用代码而将原本需要6行才能写完的程序使用2行代码即可完成。
CSS的另一个特点是需要大量的书写与渐变。譬如说写一个简单的白色到黑色的渐变：
.gradient { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000)); background-image: -webkit-linear-gradient(#ffffff, #000000); background-image: -moz-linear-gradient(#ffffff, #000000); background-image: -o-linear-gradient(#ffffff, #000000); background-image: linear-gradient(#ffffff, #000000); }
但如果使用Compass设计相同的效果很简单，只要：
.gradient
{
@include background-image(linear-gradient(#fff, #000));
}
这不仅大大减少了代码书写量，而且如果你想改变颜色，在Compass的版本中，你只需要改变他们一次。
Compass也包括一些辅助项的链接，其最大的特点是使程序员节省很多时间。首先，我们需要的排版模式开始我们的主要Sass文件包括：
@import "compass/typography"
排版模块有很大的速记造型的颜色，像这样：
a
{
// link colors (normal, hover, active, visited, focus)
@include link-colors(red, blue, grey, red, blue);
}
这就是Compass最出色的地方，它给我们每天书写的程序带来了简约版本，使更多的程序员节省了很多编写代码的时间。