ompass c是sass的一个库，关系相当于js中的jq。比较可惜的是compass的文档比较混乱 看的不太舒服，下面是compass的文档地址，有兴趣的可以去看看
http://compass-style.org/help/documentation/
在这里我就不仔细讲compass的知识了，可以去阮一峰的博客里面有一遍compass的介绍，附上链接地址
http://www.ruanyifeng.com/blog/2012/11/compass.html
这里主要讲的是图片精灵，我们在网上可以找到很多关于compass使用图片精灵的方法，比较可惜的是不太满足我们的需求，所以做了如下改变
编译之前的sass代码：
@charset "utf-8";
@import "compass/utilities/sprites";
@import "compass/css3/background-size";
// 公用图片精灵的配置信息
$sprites_common: sprite-map("common/*.png", $spacing: 10px, $layout: vertical,$sort-by: '!width',$position:10px,$repeat:no-repeat,$clean-up:true);
@mixin img-sprite($sprite, $name, $sprite-name) {
//获取当前图标的图片名字
$imgurl: sprite-file($sprite, $name);
//获取当前图标的位置
$pos: sprite-position($sprite, $name);
//根据名字获取获取长度和宽度，并设置
width: image-width($imgurl) / 2;
height: image-height($imgurl) / 2;
//设置图标的位置
background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
//使用compass的Css3模块 兼容处理背景图片大小
@include background-size(ceil(image-width(sprite-path($sprite)) / 2) auto);
}@mixin img-common($name) {
@include img-sprite($sprites_common, $name, "common");
}//设定icon的图片信息.common{//下面这句代码会触发图标合成一张图
background-image: sprite-url($sprites_common);
background-repeat: no-repeat;
display: inline-block;
.icon-baike{@include img-common('ic_baike')
}.icon-ic_card_gongshang{@include img-common('ic_card_gongshang')
}}
编译之后的css文件:
/* line 29, ../sass/ie.scss */.common {
background-image: url('/img/common-sbb7f65b409.png');
background-repeat: no-repeat;
display: inline-block;
}/* line 34, ../sass/ie.scss */.common .icon-baike {
width: 18px;
height: 20px;
background-position: -5px -1870px;
-moz-background-size: 59px auto;
-o-background-size: 59px auto;
-webkit-background-size: 59px auto;
background-size: 59px auto;
}/* line 37, ../sass/ie.scss */.common .icon-ic_card_gongshang {
width: 30px;
height: 30px;
background-position: -5px -743px;
-moz-background-size: 59px auto;
-o-background-size: 59px auto;
-webkit-background-size: 59px auto;
background-size: 59px auto;
}更多相关文章
http://www.alliedjeep.com/145105.htm