由于最近没什么时间好好写博文，我把用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: -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 / );
width:ceil($width / ); //sprite-position 获取目标图的位置
background-position: round(nth(sprite-position($sprites,$name),)/)
round(nth(sprite-position($sprites,$name),)/);
background-size:ceil($width / ) 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), ) / );
$pos_y: floor(nth(sprite-position($sprite, $name), ) / );
$width: ceil(image-width(sprite-file($sprite, $name)) / );
$height: ceil(image-height(sprite-file($sprite, $name)) / );
$size_w: ceil(image-width(sprite-path($sprite)) / );
$size_h: ceil(image-height(sprite-path($sprite)) / );
@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 == {$px:0px}
@return $px / $browser-default-font-size * 1rem;
}
@function pxTo2rem($px){
@if $px == {$px:0px}
@return $px / ($browser-default-font-size*) * 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/); //获取宽度的一半
$heightHalf:ceil($height/); //获取高度的一半
//sprite-position 获取目标图的位置,nth操作数组
$posX:round(nth(sprite-position($sprites,$name),)); //获取沿x轴的位移
$posY:round(nth(sprite-position($sprites, $name), )); //获取沿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制作雪碧图参考资料: