compass常用模块(reset、css3、layout篇)

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模块。

举例:

 编译后代码:

compass常用模块(reset、css3、layout篇)_第1张图片

假如不需要自动生成Firefox的适配代码,这时就需要用Browser Support模块。来配置compass默认支持哪些浏览器。对于特定浏览器支持到哪个版本。

设置compass支持的浏览器:

$supported-browsers: chrome firefox;

或$supported-browsers: chrome,firefox;

设置compass支持的浏览器的最低版本(compass默认支持到ie5.5):

$browser-minimum-versions:("ie":"8","":"")

3、layout:提供页面布局的控制能力(使用率最低)

compass常用模块(reset、css3、layout篇)_第2张图片

你可能感兴趣的:(compass常用模块(reset、css3、layout篇))