1、compass官网：compass-style.org
compass是一个开源的书写框架
正确安装完ruby之后，使用gem install compass安装
1、compass create learn-compass-init:通过compass直接创建一个compass框架项目
2、@import “compass/reset”：compass 内置浏览器重置样式模块
2、补充部分：
@import “compass/reset”的设计思路：reset把对样式的重置封装成了一个又一个的mixin，通过@import "compass/reset/utilities"来引入这些mixin的集合，然后经过调用其中的一个global-reset的mixin来达到和reset一样的重置效果。
简单来说：
@import "compass/reset";等价于
@import "compass/reset/utilities";
@include global-reset;
详情见compass官网http://compass-style.org/reference/compass/reset/utilities/
3、指令部分：
(1)compass watch监听代码变化自动编译到CSS文件
(2)compass compile编译
(3)ompass interactive:进入console状态，调用browsers() ,可以看目前考虑的兼容哪些浏览器
(4)调用browser-versions(chrome)：括号里面传浏览器名字，可以看目前支持的浏览器版本。
(5)compass compile -e production --force
compass默认是development开发模式，这里的指令是将强制覆盖掉开发模式，采用上线模式，由scss文件编译生成的css文件中不在出现调试注释。
上面的DEBUG调试语句是由于在SCSS文件中写了@debug compass-env();
4、compass核心模块：http://compass-style.org/reference/compass/layout/
1、Reset模块：浏览器样式重置模块，用来减少不同浏览器之间的差异性。
2、Layout模块：提供页面布局的控制能力，比如，将一个容器中的子元素横向拉伸占满，纵向拉伸占满。
注意：这两个模块均需要单独引入，引入方式如上图。
3、CSS3模块：主要用来提供跨浏览器的CSS3能力。
4、Helpers模块：内含一系列函数，与sass函数列表很像，功能比较强大，不过较少用到。
5、Typography模块：主要用来修饰文本样式。
6、Utilities模块：辅助工具类模块，多是mixin
7、browser模块：用来配置compass默认支持哪些浏览器，对于特定浏览器支持到那个版本，该模块的配置一旦修改将会影响其余六个模块的输出。
4.1使用normalize替换掉compass的reset模块，
(1)在normalize官网，http://necolas.github.io/normalize.css/上Download最新版本，然后放到自己的项目目录，通过import引用
(2)使用包管理工具，npm install normalize.css
(3)使用compass的normalize的插件 使用命令行指令“gem install compass-normalize”
这里使用第三种方式：
1.在config.rb中引用插件 require 'compass-normalize'
扩展：
<1>require 'compass/import-once/activate'用来设置，在不同代码位置，重复引用时只需一次即可，避免代码冗余。实在需要重复引用时加上“！”即可，如 @import "compass/reset" xxxxxx "@import "compass/reset!"
<2>config.rb文件中output_style=“expanded or nested compact compressed”：用来设定编译成CSS后代码风格
其中使用compress压缩上线时，会去除掉里面的所有注释，那么可以在注释的最前面加上“！”，避免注释被压缩掉/*!xxxxx*/
4.2Normalize核心模块（八大模块）
1.base模块：用来统一HTML，body 标签的字体，文字大小，边距等。
2.html5模块：用来统一html中新增的元素，如article,aside等。
3.links模块：统一a标签的修饰，去掉hover和active时的边线
4.typography模块：b,strong,everyone,sub下标，sup上标等段落文本修饰
5.Embedded模块：用来统一img,svg
6.Figures:figure,pre,code等
7.Forms:button ,input,select,textarea,optgroup
8.Tables:table,td,th
5、compass的layout模块（使用率最低的一个模块）
其中包括三个小mixin，具体的看官方文本
举例如下：
scss文件：
.strech-full{
@include stretch;
}
.strech-x{
@include stretch-x;
}
编译之后：
.strech-full {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* line 69, ../sass/screen.scss */
.strech-x {
position: absolute;
left: 0;
right: 0;
}