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/
