compass 学习
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-normalize2、引入插件：
修改config.rb文件，在文件头部添加
require 'compass-normalize'
compass/import-once/activate：
一般生产的config.rb文件头部会有 require 'compass/import-once/activate'：
这个插件的作用是防止sass的 @import 多次引入重复的文件，引入这个插件后即使写多次 @import "aa",也只会引入一次aa。若确实想多次引入aa ，则应写成 @import "aa!" ，末尾添加叹号，则会多次引入。
注：sass中的@import 会重复引入同一插件
叹号小技巧：
如果将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
}
其实@import "compass/reset/" 等价于 @import "compass/reset/utilities" 后再@include global-reset();
// @import "compass/reset"; @import "compass/reset/utilities"; @include global-reset();
compass 中layout模块
layout模块下面又细分3个核心mixin模块，可以分别引入。
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(54px) //参数为footer高度 @include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer") // 自定义选择器
compass 中css3模块
compass css3模块最常用，主要提供css3的跨浏览器能力。
1、引入css3模块
@import "compass/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;
}
查看compass中支持的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"
查看当前支持的浏览器版本：
控制台命令：
compass interactive //进入一个用于测试Compass中SassScript的控制台 browsers() //查看支持的浏览器 browser-versions(chrome) //查看支持的chrome版本在sass文件中输入 @debug browsers() 控制台也会打印出支持的浏览器。
设置compass支持的浏览器：
@import "compass/css3"; $supported-browsers: chrome firefox;也可以写成：$supported-browsers: chrome,firefox ; 浏览器队列用 空格 或者 逗号 分隔均可。
设置compass支持的浏览器的最低版本（compass默认支持到ie5.5）：
$browser-minimum-versions:("ie":"8","":"")
不设置的话 默认支持 browsers-versions 返回的的版本。
compass 中Typography
主要修饰文本样式垂直韵律，引入方式：
@import "compass/typography"; //统一引入4个模块 <pre name="code" class="html">@import "compass/typography/links"; //单独引入links模块 <pre name="code" class="html"><pre name="code" class="html">@import "compass/typography/links"; //引入list模块
<pre name="code" class="html"><pre name="code" class="html"><pre name="code" class="html">@import "compass/typography/links"; //引入list模块
<pre name="code" class="html"><pre name="code" class="html"><pre name="code" class="html">@import "compass/typography/links"; //引入list模块
compass 中Helpers模块
compass 中Utilities模块
使用compass自动合并css雪碧图(css sprite)
参考：http://riny.net/2014/compass-sprite/
缺点：只支持png图片
遇到问题：执行报错 ...
扩展：当config.rb中的文件 output_style = :compressed 时，默认转换后的css文件中的注释会被删除，如何防止删除（应用场景：如在项目中需要声明自己的权益）？
解决方法：在注释的最前面加叹号"!", 这样的注释就不会被删除,示例：
/*! * 声明 */
compass常用：
http://www.th7.cn/web/html-css/201411/67314.shtml