Compass是一个强大的Sass框架,它的设计目标是顺畅、高效地装扮互联网,使用它的人可写出可维护性更高的样式表。
Compass 七大模块
Reset
Layout
CSS3
Helpers
Typography
Utilities
Browser
Compass 核心模块
Reset
Layout
@import "compass/reset"
@import "compass/layout"
Browser 模块：
Browser 用来配置compass默认支持哪些浏览器,对于特定浏览器,默认支持到哪个版本.
Browser 中的配置一旦修改,将影响其余6个模块的输出,因为需要针对不同的浏览器做不同的适配.
reset模块：
reset 是 compass 内置的，如果我们想修改为 normalize。
命令行使用 gem install compass-normalize
然后在 config.rb 配置文件中添加
require 'compass-normalize'
然后在 scss 文件中 @import "normalize";
layout 模块：
如果说 reset 模块是 compass 中使用起来最简单的模块，那么，layout 模块则是 compass 中使用率最低的模块。Layout 模块用来实现页面布局控制的。
CSS3模块：
如果说 Layout 模块是 compass 中使用率最低的模块，那么，CSS3 模块肯定是主动使用率最高的模块。
CSS3 模块主要用于提供跨浏览器的 CSS3 能力。
Typography 模块：
Typography 模块主要用来修饰文本样式、垂直韵律等(Links、Lists、Text、Vertical Rhythm)
Utilities 模块：
Utilities 模块是辅助工具类函数
helpers 模块：
helpers 类里面多是函数，utilities 里面多是 mixin，包含：
Color : 颜色相关的工具集合
Print : 打印控制的集合
Tables : table样式相关的集合(table model)
Geeneral : 通用的一般类的工具(跨浏览器的清除浮动)
Sprites : 精灵图合图相关的工具集合(重点)
1．创建一个Compass项目
确保电脑已经安装Ruby环境，并且安装了Sass和Compass
compass create sample
2．compass命令
compass编译。
进入项目根目录：
cd sample
执行编译
compass compile
编译输出格式：
--output-style compressed 输出压缩格式
Compass只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用--force参数。
compass compile --force
除了使用命令行参数，还可以在配置文件config.rb中指定编译模式。
output_style = :expanded
config.rb的配置文件可以这样设置，可以通过指定environment的值（:production或者:development），智能判断编译模式。
# environment = :development
environment = :production
output_style = (environment == :production) ? :compressed : :expanded
监听命令：
compass watch
3．使用Compass解决真实的CSS问题
1)样式重置
@import "compass/reset"
通过Sass引入命令@import引入Compass的重置模块;
reset模块是Compass框架中独立的一部分,可被随意引用到项目中;
通过加入这行代码,生成的CSS文件中就会包含CSS重置部分的代码;
@include reset-html5
输出文件中会生成额外的CSS规则来对HTML5的元素进行基本的样式修改,
2)引入基本布局--Blueprint网格布局
compass create my_grid --using blueprint
@include column($sidebar-columns);
3)通过表格辅助器为表格添加更加专业的斑马条纹样式
@import "compass/utilities/tables";
table {
$table-color:#666; // 定义变量;
@include table-scaffolding; // 引入混合器;提供最基本的样式修饰;
@include inner-table-borders(1px, darken($table-color,40%));// 添加单元格边框;
@include outer-table-borders(2px); // 添加表格边框;
@include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222); // 添加斑马条纹样式;
}
4)CSS3前缀支持
@import "compass/css3"
Sass:
.rounded {
@include border-radius(5px);
}
CSS:
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}