Compass采用模块结构，不同模块提供不同的功能。目前，它内置五个模块：

　　* reset
　　* css3
　　* layout
　　* typography
　　* utilities

下面，我依次介绍这五个内置模块。它们提供Compass的主要功能，但是除了它们，你还可以自行加载网上的第三方模块，或者自己动手编写模块。

1、reset模块

通常，编写自己的样式之前，有必要重置浏览器的默认样式。

写法是

　　@import "compass/reset";

上面的@import命令，用来指定加载模块，这里就是加载reset模块。编译后，会生成相应的css reset代码。

2、CSS3模块

目前，该模块提供19种CSS3命令。在这里，我介绍其中的三种：圆角、透明和行内区块。

2.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);

2.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);

2.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;
　　}

3、layout模块

该模块提供布局功能。

比如，指定页面的footer部分总是出现在浏览器最底端：

　　@import "compass/layout";

　　#footer {
　　　　@include sticky-footer(54px);
　　}

又比如，指定子元素占满父元素的空间：

　　@import "compass/layout";

　　#stretch-full {
　　　　@include stretch; 
　　}

4、typography模块

该模块提供版式功能。

比如，指定链接颜色的mixin为：

　　link-colors($normal, $hover, $active, $visited, $focus);

使用时写成：

　　@import "compass/typography";

　　a {
　　　　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
　　}

5、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;
　　}