compass做雪碧图

由于最近没什么时间好好写博文，我把用sass做雪碧图的关键点贴出来方便自己记忆:

config.rb注释

# Set this to the root of your project when deployed:
#配置服务器路径
http_path = "http//:www.baidu.com/"

#配置css sass images javascripts路径
css_dir = "public/stylesheets"
sass_dir = "public/sass"    
images_dir = "public/images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
#根据个人偏好选择输出样式 :nested嵌套  :compact紧密 :compressed压缩
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
#相对路径
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

sass写法生产sprites:

@import "compass/utilities/sprites";    // 加载compass sprites模块
$book-spacing:100px;                // 配置所有sprite间距为100px，默认为0px  此句要放在前面才生效
$book-position: 100px;                // 配置所有sprite的位置，默认为0px
$book-base-class:"pfan";
$book-sprite-dimensions:true;       //自动给每个html选择器添加宽度width和高度height
//$book-layout:smart;                  //智能布局的把每张图像放在最合适的地方
//$book-layout:horizontal;                  //水平排列
$book-layout:vertical;                  //纵向排列
//$book-layout:diagonal;                  //对角线布局，最浪费资源

@import "book/*.png";                    // 导入share目录下所有png图片
@include all-book-sprites();                // 输出所有的雪碧图css
//$<map>-<sprite>-spacing: 10px;        // 配置单个sprite间距为10px，默认继承$<map>-spacing的值
//$<map>-<sprite>-position: 0px;        // 配置单个sprite的位置，默认继承$<map>-position的值

 

做雪碧图有两种方式：

　　第一种，简单粗暴：

//导入雪碧图  通过@import导进图片，然后再通过@include合并成雪碧图
//@import "normal/*.png";
//@include all-normal-sprites;

　　第二种，精细化，每个去做：

//引进图片合并给一个变量(后面会用到这个变量)
$sprites:sprite-map("leave/*.png");

　　做移动端记得要设置间距

$<map>-spacing:100px; 

　　

　　第一种方案，我就不做太多介绍了，说说第二种，来个例子

//引进图片合并给一个变量(后面会用到这个变量)
$sprites:sprite-map("leave/*.png");

.test{
    display:block;
    background-repeat:no-repeat;
    background-image:sprite-url($sprites);//获取整个雪碧图路径
    background-position:sprite-position($sprites,update); //获取当个文件所移动的位置
    width:image-width(sprite-file($sprites,update)); //设置ico宽度高度
    height:image-height(sprite-file($sprites,update));
}

　　生成代码：

.test {
  display: block;
  background-repeat: no-repeat;
  background-image: url('../images/leave-s1df1db3dd3.png');
  background-position: 0 -86px;
  width: 67px;
  height: 25px;
}

 

最后附上雪碧图PC\WAP端引用的@mixin

//雪碧图mixin引块，因为目前编译不过GIF，故暂用png8
$media:false;
@mixin iconItem($sprites,$name,$iE6:null){
    background-image:sprite-url($sprites) no-repeat;  //获取整个雪碧图路径
    @if $iE6 != null{ //null
        _background-image:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
    }
    $width:image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片
    $height:image-height(sprite-file($sprites,$name)) //获取目标图片
    @if $media{//wap
        height:ceil($height / 2);
        width:ceil($width / 2);
        
        //sprite-position 获取目标图的位置
        background-position: round(nth(sprite-position($sprites,$name),1)/2) 
                             round(nth(sprite-position($sprites,$name),2)/2);
        background-size:ceil($width / 2) auto;
    } @else{//PC
        height:$height;
        width:$width;
        background-position:sprite-position($sprites,$name);
    }
}

另一个：

//compass 二倍图转rem
@mixin s2b($sprite, $name, $toRem:true) {
    $pos_x: floor(nth(sprite-position($sprite, $name), 1) / 2);
    $pos_y: floor(nth(sprite-position($sprite, $name), 2) / 2);
    $width: ceil(image-width(sprite-file($sprite, $name)) / 2);
    $height: ceil(image-height(sprite-file($sprite, $name)) / 2);
    $size_w: ceil(image-width(sprite-path($sprite)) / 2);
    $size_h: ceil(image-height(sprite-path($sprite)) / 2);
    @if $toRem {
        $pos_x: pxTorem($pos_x);
        $pos_y: pxTorem($pos_y);
        $width: pxTorem($width);
        $height: pxTorem($height);
        $size_w: pxTorem($size_w);
        $size_h: pxTorem($size_h);
    }
    background-image: $sprite;
    background-repeat: no-repeat;
    background-position: $pos_x $pos_y;
    background-size: $size_w $size_h;
    //background-size: $size_w auto;
    height: $height;
    width: $width;
}

 我自己的(这里面有一点要注意雪碧地图，加行间距要这样$sprites:sprite-map("leave/*.png",$spacing:10px,$layout: vertical);列到里面):

/*引进图片合并给一个变量(后面会用到这个变量)*/
$sprites:sprite-map("leave/*.png",$spacing:10px,$layout: vertical);

/*转换px到rem*/
$browser-default-font-size : 20px !default;
@function pxTorem($px){
    @if $px == 0{$px:0px}
    @return $px / $browser-default-font-size * 1rem;
}
@function pxTo2rem($px){
    @if $px == 0{$px:0px}
    @return $px / ($browser-default-font-size*2) * 1rem;
}

/*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
$media:true;
@mixin iconItem($sprites,$name,$iE6:null){
    background:sprite-url($sprites) no-repeat;  //获取整个雪碧图路径
    @if $iE6 != null{ //null
        _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
    }
    $width:image-width(sprite-file($sprites,$name));  //sprite-file 获取目标图片
    $height:image-height(sprite-file($sprites,$name));  //获取目标图片
    $toalWidth:image-width(sprite-path($sprites));    //获取整张图的宽度
    $totalHeight:image-height(sprite-path($sprites));   //获取整张图的高度
    $widthHalf:ceil($width/2);                             //获取宽度的一半
    $heightHalf:ceil($height/2);                        //获取高度的一半
    //sprite-position 获取目标图的位置,nth操作数组
    $posX:round(nth(sprite-position($sprites,$name),1));  //获取沿x轴的位移
    $posY:round(nth(sprite-position($sprites, $name), 2));  //获取沿y轴的位移
    @if $media{//wap
        height:pxTorem($heightHalf);
        width:pxTorem($widthHalf);
        font:$posX;
        font:$posY;
        background-position: pxTo2rem($posX) pxTo2rem($posY);
        background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
    } @else{//PC
        height:$height;
        width:$width;
        background-position:sprite-position($sprites,$name);
    }
}
/*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  timestampImg($imgUrl){
    background:image-url($imgUrl) no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}
/*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  base64Img($imgUrl){
    background:inline-image($imgUrl) no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}

 

compass制作雪碧图参考资料:

　　使用compass自动合并css雪碧图

　　使用Compass生成雪碧图

　　sass技巧：compass制作“雪碧图”  

　　【Sass中级】使用Sass和Compass制作雪碧图