SASS的扩展库Compass

一、Compass简洁

Compass是一个基于SASS的类库，它帮助了我们预定义好了很多常用的Mixin和Function。

Compass的组成模块：

• CSS3：将CSS3的带有属性前缀的兼容代码组合成Mixin。
• Reset：用于清除浏览器自带样式，保证不同浏览器下显示的一致性。
• Utilities：对一些常用的CSS样式进行简化。
• Helpers：提供一些常用的函数。
• Layout：提供栅格系统和一些简单的布局样式。

二、CSS3模块

Compass的CSS3模块实际就是将开发中经常用到的CSS3属性用语义性很强的Mixin进行了封装，节约了开发者自己定义的时间。CSS3模块也是Compass应用最为广泛的模块，要使用CSS3模块，首先要在SASS文件头部引入：

import "compass/css3";

例如设置元素的透明度：

#opacity-test {
	@include opacity(0.5);
}

它将正常的opacity属性和IE滤镜写在一个Mixin中，在使用中，只需使用@include关键字对Mixin进行调用即可。

三、Reset模块

其功能类似于Bootstrap 3中集成的normalize.css，用于清除浏览器的默认样式，尽量保持网站在不同浏览器下的一致性表现。

使用Reset模块首先在SASS文件头部进行引入：

@import "compass/reset/utilities";

Compass不仅可以提供全局的样式设置，还可以对某些指定元素进行重置，例如可以使用reset-box-model进行盒子模型的重置：

.box {
	@include reset-box-model;
}

例如可以用reset-display对元素的display进行重置：

.inline {
	@include reset-display;
}

四、Utilities模块

这个模块是对开发中经常用到的样式进行封装。主要包括以下几个分类：

• Links：常用链接样式。
• Lists：常用列表样式。
• Text：文本样式的辅助方法。
• Color：常用颜色。
• General：其他常用样式。
• Sprites：”图片精灵“，即对background-position的封装。
• Tables：表格样式的辅助方法。

示例：

a {
	@include hover-link;
}
p {
`@include ellipsis;
}

五、Helpers模块

Helpers模块主要使用了SASS的函数特性，将一些操作封装成函数以提升开发效率。
示例：

.test {
	width: 200px * sin(30deg);
}

六、总结

Compass是基于SASS的一个扩展库，它可以帮助我们进一步地简化和抽象代码，并提升代码的兼容性。