compass内置五大模块:reset、css3、layout、typography、utilities(官网:http://compass-style.org/reference/compass/)
1、reset:浏览器样式重置模块,用来减少不同浏览器之间的差异性
reset把对样式的重置封装成了一个又一个的mixin,通过@import "compass/reset/utilities"来引入这些mixin的集合,有时不需要进行全局的样式重置,可以单独重置某一块。
用法:
@import "compass/reset/utilities";
@include reset-html5;
可以使用normalize替换掉compass的reset模块
(1)使用包管理工具,npm install normalize.css
(2)使用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压缩上线时,会去除掉里面的所有注释,那么可以在注释的最前面加上“!”,避免注释被压缩掉/*!xxx*/
2、css3:主要用来提供跨浏览器的CSS3能力
在用CSS3模块的时候要调整Browser Support模块的配置,即使不主动调整CSS3也引入了Browser Support模块。
举例:
编译后代码:
假如不需要自动生成Firefox的适配代码,这时就需要用Browser Support模块。来配置compass默认支持哪些浏览器。对于特定浏览器支持到哪个版本。
设置compass支持的浏览器:
$supported-browsers: chrome firefox;
或$supported-browsers: chrome,firefox;
设置compass支持的浏览器的最低版本(compass默认支持到ie5.5):
$browser-minimum-versions:("ie":"8","":"")