Compass的模塊介紹

Compass採用模塊結構，不一樣模塊提供不一樣的功能。目前，它內置五個模塊：

　　* reset
　　* css3
　　* layout
　　* typography
　　* utilities

下面，我依次介紹這五個內置模塊。它們提供Compass的主要功能，可是除了它們，你還能夠自行加載網上的第三方模塊，或者本身動手編寫模塊。

一、reset模塊

一般，編寫本身的樣式以前，有必要重置瀏覽器的默認樣式。

寫法是

　　@import "compass/reset";

上面的@import命令，用來指定加載模塊，這裏就是加載reset模塊。編譯後，會生成相應的css reset代碼。

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

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