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-normalize
2、引入插件:
放在config.rb文件头部
require 'compass-normalize'
compass/import-once/activate:
一般项目建立之后的config.rb文件头部会有 require ‘compass/import-once/activate’:
这个插件的作用是防止sass的 @import 多次引入重复的文件,引入这个插件后即使写多次 @import “aa”,也只会引入一次aa。若确实想多次引入aa ,则应写成 @import “aa!” ,末尾添加叹号,则会多次引入。
叹号技巧:
如果将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
}
//css
.div{
margin:0;
padding:0;
border:0;
}
其实@import “compass/reset/” 等价于 @import “compass/reset/utilities” 后再@include global-reset() ,如果不传参数,可以写成@include global-reset;
@import "compass/reset";
/*@import "compass/reset/utilities";
@include global-reset();*/
compass 中layout模块
layout模块下面又细分3个核心mixin模块,可以分别引入。
@import "compass/layout";
@import "compass/layout/grid-background";
@import "compass/layout/sticky-footer";
@import "compass/layout/stretching";
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(30px) //参数为footer高度
@include sticky-footer(30px, "#my-root", "#my-root-footer", "#my-footer") // 自定义选择器一一对应
compass 中css3模块
compass css3模块最常用,主要提供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;
}
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"
查看当前支持的浏览器版本:
在sass文件中输入 @debug browsers() 控制台会打印出支持的浏览器。
控制台命令也可以打印出支持浏览器:
compass interactive //进入一个用于测试Compass中SassScript的控制台
browsers() //查看支持的浏览器
browser-versions(chrome) //查看支持的chrome版本
设置compass支持的浏览器:
$supported-browsers: chrome firefox;
也可以写成:$supported-browsers: chrome,firefox ; 浏览器队列用 空格 或者 逗号 分隔均可。
设置compass支持的浏览器的最低版本(compass默认支持到ie5.5):
$browser-minimum-versions:("ie":"8")
不设置的话 默认支持 browsers-versions 返回的的版本。
compass 中Typography
typography模块下面又细分4个核心mixin模块,可以分别引入。
@import "compass/typography"
@import "compass/typography/links"
@import "compass/typography/lists"
@import "compass/typography/text"
@import "compass/typography/vertical_rhythm"
typography更多属性地址:http://compass-style.org/reference/compass/typography/
compass 中Helpers模块
config.rb 文件中使用相对位置:
relative_assets = true
aa{
background-image: image-url('1.jpg');
}
//css
aa{
background-image: url('../images/1.jpg?1465725850');
}
compass 中Utilities模块
合并雪碧图:(只支持png)
在sass目录下新建_icons.scss文件,并写入以下代码:
@import "compass/utilities/sprites"; // 加载compass sprites模块
@import "logo/*.png"; // 导入logo目录下所有png图片合成雪碧图
@include all-logo-sprites; // 输出所有的雪碧图css
然后在screen.scss中将_icons.scss文件中引入进来:
@import "icons";
至此,我们就实现了一个简单的雪碧图合并
生成的代码中.logo-sprite是雪碧图的基础类,生成的每个雪碧图默认的class规则是:.目录名-图片名。如果想自定义,我们可以通过下面调用单个雪碧图的方式来实现。
调用单个雪碧图样式:
@import "compass/utilities/sprites";
@import "logo/*.png";
.test {
@include logo-sprites(add);
}
编译后:
.logo-sprite, .test .logo-add {
background-image: url('../images/logo-s6821f80d78.png');
background-repeat: no-repeat;
}
.test .logo-add {
background-position: 0 0;
}
当图标有多种状态时,比如hover, active, focus, target等。需要将图标按照一定的规则命名:
add.png // 默认状态图标
add_hover.png // hover状态图标
add_active.png // active状态图标
编译后
也就是说compass默认会将以_hover, _active等名字结尾的图片自动输出对应的:hover, :active等伪类样式。当然如果不想这样的话,也可以禁用它。
$disable-magic-sprite-selectors : true; // 默认为false
然后在将
add_hover.png 改为 addhove.png (任意你想定义的名字)
add_active.png 改为 addactive.png (任意你想定义的名字)
重新编译
雪碧图配置
设置sprite尺寸
我们在合并雪碧图时,很多时候图片的尺寸都不一样,那么在使用时我们如何给每个sprite设置尺寸呢?compass有提供自动设置每个sprite尺寸的配置,默认是关闭的,我们只需手动启用即可。
@import "compass/utilities/sprites";
$logo-sprite-dimensions: true; // 启用自动设置sprite尺寸,默认值为false
编译出:
.logo-add {
background-position: 0 0;
height: 20px;
width: 20px; //默认图片自身的宽高
}
配置sprite的布局方式
$logo-layout: vertical/horizontal/diagonal/smart; // 默认布局方式为vertical
清除过期的sprite
每当添加、删除或改变图片后,都会生成新的sprite,默认情况下compass会自动的移除旧的sprite,当然也可以通过配置来保留旧的sprite。
$logo-clean-up: true/false; // 默认值为true
更多设置: http://compass-style.org/reference/compass/utilities/sprites/