由于最近没什么时间好好写博文，我把用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); //获取当个文件所移动的位置 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; 67px; height: 25px; }
最后附上雪碧图PCWAP端引用的@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 } $image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片 $height:image-height(sprite-file($sprites,$name)) //获取目标图片 @if $media{//wap height:ceil($height / 2); 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; 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); $ 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); $ 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; }
我自己的(这里面有一点要注意雪碧地图，加行间距要这样$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 } $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); pxTorem($widthHalf); font:$posX; font:$posY; background-position: pxTo2rem($posX) pxTo2rem($posY); background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight); } @else{//PC height:$height; $width; background-position:sprite-position($sprites,$name); } } /*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin timestampImg($imgUrl){ background:image-url($imgUrl) no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap pxTo2rem($width); height:pxTo2rem($height); background-size:pxTo2rem($width) pxTo2rem($height); } @else{ height:$height; $width; } } /*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/ @mixin base64Img($imgUrl){ background:inline-image($imgUrl) no-repeat; $image-width($imgUrl); $height:image-height($imgUrl); @if $media{ //wap pxTo2rem($width); height:pxTo2rem($height); background-size:pxTo2rem($width) pxTo2rem($height); } @else{ height:$height; $width; } }
compass制作雪碧图参考资料: