Compass核心模塊
compass核心模塊中，只有reset和 layout需要顯示引入，其它模塊在@import “compass”時候就引入了。
@import "compass/reset"
@import "compass/layout" 用normalize替換compass內置的的reset：（normalize是compass的插件）
normalize改良了compass/reset ,統一了跨瀏覽器差異，而不是都清0；
1、安裝normalize：
gem install compass-normalize 2、引入插件：
放在config.rb文件頭部
require 'compass-normalize' compass/import-once/activate：
一般項目建立之後的config.rb文件頭部會有 require ‘compass/import-once/activate’：
這個插件的作用是防止sass的 @import 多次引入重複的文件，引入這個插件後即使寫多次 @import “aa”,也只會引入一次aa。若確實想多次引入aa ，則應寫成 @import “aa!” ，末尾添加歎號，則會多次引入。
歎號技巧：
如果將config.rb配置文件中設置 output_style = :compressed 生成的壓縮css文件中的註釋會被刪除，如何防止註釋被刪除？在註釋的開頭加”!”，則註釋會保留，即使設置了 output_style = :compressed。
/*！
* 你好你好
*/3、sass文件中用 @import “normalize” 替換 @import “compass/reset”
避免引入未使用的模塊，可按需引入normalize的核心模塊：
引入所需模塊前先引入@import “normalize-version”，後面跟需要的normalize模塊
@import "normalize-version";
/* 分割1 */
@import "normalize/base";
/* 分割2 */
@import "normalize/html5";
/* 分割3 */
... compass 中 reset模塊
按需引入compass 中 reset的核心模塊
官方地址：http://compass-style.org/reference/compass/reset/utilities/
reset的核心模塊都是通過mixin的方式提供，引入示例代碼：
@import "compass/reset/utilities"
.div{
@include reset-box-model
}
//css
.div{
margin:0;
padding:0;
border:0;
} 其實@import “compass/reset/” 等價於 @import “compass/reset/utilities” 後再@include global-reset() ,如果不傳參數，可以寫成@include global-reset;
@import "compass/reset";
/*@import "compass/reset/utilities";
@include global-reset();*/compass 中layout模塊
layout模塊下面又細分3個核心mixin模塊，可以分別引入。
@import "compass/layout";
@import "compass/layout/grid-background";
@import "compass/layout/sticky-footer";
@import "compass/layout/stretching";stretching模塊，按父元素尺寸拉伸元素，示例：
.stretch-full {
@include stretch();
}
.stretch-full2 {
@include stretch(5px,0px,5px,5px); //非0值單位px不可省
}
.stretch-full3 {
@include stretch($offset-top:5px,$offset-right:0px,$offset-bottom:5px,$offset-left:5px); //參數順序可變,非0值單位px不可省
} 經過sass轉換後代碼：
.stretch-full {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.stretch-full2 {
position: absolute;
top: 5px;
bottom: 0;
left: 5px;
right: 5px;
}
.stretch-full3 {
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 0px;
} sticky-footer模塊,提供footer總在頁面最底部的解決方案，需要固定的結構：
<body>
<div id="root">
<div id="root_footer"></div>
</div>
<div id="footer">
Footer content goes here.
</div>
</body> 使用方法：
@include sticky-footer(30px) //參數爲footer高度
@include sticky-footer(30px, "#my-root", "#my-root-footer", "#my-footer") // 自定義選擇器一一對應compass 中css3模塊
compass css3模塊最常用，主要提供css3的跨瀏覽器能力。
@import "compass/css3"; //引入模塊
div{
@include box-shadow(1px,1px,2px,3px,#333)
} 編譯後模塊
div {
-moz-box-shadow: 1px, 1px, 2px, 3px, #333;
-webkit-box-shadow: 1px, 1px, 2px, 3px, #333;
box-shadow: 1px, 1px, 2px, 3px, #333;
} css3更多屬性地址：http://compass-style.org/reference/compass/css3/
compass 中Browser Support模塊
修改Browser Support模塊可以決定compass輸出的css支持哪些瀏覽器版本，會影響其它模塊。css3模塊內部已經@import了support模塊，所以下面方式均達到了引入support模塊的效果
/*@import "compass/css3"*/
@import "compass/support" 查看當前支持的瀏覽器版本：
在sass文件中輸入 @debug browsers() 控制檯會打印出支持的瀏覽器。
控制檯命令也可以打印出支持瀏覽器：
compass interactive //進入一個用於測試Compass中SassScript的控制檯
browsers() //查看支持的瀏覽器
browser-versions(chrome) //查看支持的chrome版本 設置compass支持的瀏覽器：
$supported-browsers: chrome firefox; 也可以寫成：$supported-browsers: chrome,firefox ; 瀏覽器隊列用 空格 或者 逗號 分隔均可。
設置compass支持的瀏覽器的最低版本（compass默認支持到ie5.5）：
$browser-minimum-versions:("ie":"8") 不設置的話 默認支持 browsers-versions 返回的的版本。
compass 中Typography
typography模塊下面又細分4個核心mixin模塊，可以分別引入。
@import "compass/typography"
@import "compass/typography/links"
@import "compass/typography/lists"
@import "compass/typography/text"
@import "compass/typography/vertical_rhythm"typography更多屬性地址：http://compass-style.org/reference/compass/typography/
compass 中Helpers模塊
config.rb 文件中使用相對位置：
relative_assets = true
aa{
background-image: image-url('1.jpg');
}
//css
aa{
background-image: url('../images/1.jpg?1465725850');
}compass 中Utilities模塊
合併雪碧圖:(只支持png)
在sass目錄下新建_icons.scss文件，並寫入以下代碼：
@import "compass/utilities/sprites"; // 加載compass sprites模塊
@import "logo/*.png"; // 導入logo目錄下所有png圖片合成雪碧圖
@include all-logo-sprites; // 輸出所有的雪碧圖css然後在screen.scss中將_icons.scss文件中引入進來：
@import "icons";至此，我們就實現了一個簡單的雪碧圖合併
生成的代碼中.logo-sprite是雪碧圖的基礎類，生成的每個雪碧圖默認的class規則是：.目錄名-圖片名。如果想自定義，我們可以通過下面調用單個雪碧圖的方式來實現。
調用單個雪碧圖樣式：
@import "compass/utilities/sprites";
@import "logo/*.png";
.test {
@include logo-sprites(add);
}編譯後：
.logo-sprite, .test .logo-add {
background-image: url('../images/logo-s6821f80d78.png');
background-repeat: no-repeat;
}
.test .logo-add {
background-position: 0 0;
}當圖標有多種狀態時，比如hover, active, focus, target等。需要將圖標按照一定的規則命名：
add.png // 默認狀態圖標
add_hover.png // hover狀態圖標
add_active.png // active狀態圖標編譯後
也就是說compass默認會將以_hover, _active等名字結尾的圖片自動輸出對應的:hover, :active等僞類樣式。當然如果不想這樣的話，也可以禁用它。
$disable-magic-sprite-selectors : true; // 默認爲false然後在將
add_hover.png 改爲 addhove.png (任意你想定義的名字)
add_active.png 改爲 addactive.png (任意你想定義的名字)重新編譯
雪碧圖配置
設置sprite尺寸
我們在合併雪碧圖時，很多時候圖片的尺寸都不一樣，那麼在使用時我們如何給每個sprite設置尺寸呢？compass有提供自動設置每個sprite尺寸的配置，默認是關閉的，我們只需手動啓用即可。
@import "compass/utilities/sprites";
$logo-sprite-dimensions: true; // 啓用自動設置sprite尺寸，默認值爲false編譯出：
.logo-add {
background-position: 0 0;
height: 20px;
width: 20px; //默認圖片自身的寬高
}配置sprite的佈局方式
$logo-layout: vertical/horizontal/diagonal/smart; // 默認佈局方式爲vertical清除過期的sprite
每當添加、刪除或改變圖片後，都會生成新的sprite，默認情況下compass會自動的移除舊的sprite，當然也可以通過配置來保留舊的sprite。
$logo-clean-up: true/false; // 默認值爲true更多設置： http://compass-style.org/reference/compass/utilities/sprites/
