使用compass更高效的编辑css －－－ 图片精灵

　　compass是sass的一个库，关系相当于js中的jq。比较可惜的是compass的文档比较混乱 看的不太舒服，下面是compass的文档地址，有兴趣的可以去看看

　　http://compass-style.org/help/documentation/

　　在这里我就不仔细讲compass的知识了，可以去阮一峰的博客里面有一遍compass的介绍，附上链接地址

　　http://www.ruanyifeng.com/blog/2012/11/compass.html

　　这里主要讲的是图片精灵，我们在网上可以找到很多关于compass使用图片精灵的方法，比较可惜的是不太满足我们的需求，所以做了如下改变

　　需要注意的是config.rb上面要写上合成雪碧图的路径

http_path = "/"
css_dir = "dist/css"
sass_dir = "src/sass"
images_dir = "dist/img"
javascripts_dir = "src/js"
sprite_load_path = "src/img"
output_style = :compressed
asset_cache_buster :none

 

　　编译之前的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;
}