今天小编跟大家讲解下有关css-sprite使用详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css-sprite使用详解 的相关资料，希望小伙伴们看了有所帮助。
可能是最好用的雪碧图工具了 好吧 至少是我用过最好用的。
首先安装css-sprite 安装这里很坑 等我最后再说。
复制代码代码如下:npm install css-sprite
我是使用gulp来构建前端代码 所以还需要安装gulp和gulp-if,安装好之后就可以开始配置啦。新建一个task:
CSS Code复制内容到剪贴板 vargulp=require('gulp'); vargulpif=require('gulp-if'); gulp.task('sprites',function(){ gulp.src('img/icon/*.png')//这是要合并的图片的路径 .pipe(sprite({ name:'icon',//定义一个名称 style:'_icon.scss',//这是生成的样式文件 format:'png',//png格式的图片 orientation:'left-right',//雪碧图合并的方向 也可以设置成垂直或水平 cssPath:'#{$icon-sprite-path}',//雪碧图的路径变量 template:'./sprite-tpl.mustache',//scss生成的模板 processor:'scss'//生成的样式文件的格式 })) .pipe(gulpif('*.png',gulp.dest('img/'),gulp.dest('css/'))); });scss的模板使用mustache：
CSS Code复制内容到剪贴板 {{#items}} ${{name}}:{{px.offset_x}}{{px.offset_y}}{{px.width}}{{px.height}}; {{/items}} @mixinsprite-width($sprite){ width:nth($sprite,3); } @mixinsprite-height($sprite){ height:nth($sprite,4); } @mixinsprite-position($sprite){ $sprite-offset-x:nth($sprite,1); $sprite-offset-y:nth($sprite,2); background-position:$sprite-offset-x$sprite-offset-y; } @mixinsprite($sprite){ @includesprite-position($sprite); @includesprite-width($sprite); @includesprite-height($sprite); } {{#sprite}} {{class}}{ background-repeat:no-repeat; overflow:hidden; border:none; background:url('{{{escaped_image}}}?v=#{$version}'); @includeinline-block(); vertical-align:middle; font-style:normal; color:$icon-font-color; } {{/sprite}} {{#items}} .{{name}}{ @includesprite(${{name}}); } {{/items}}搞定！就是那么简单。
现在只需要把图片丢到icon文件夹里面 运行下gulp sprites 就可以生成一张雪碧图icon.png和相对应的scss样式文件_icon.scss了 也可以再新建一个监听的任务 监听icon文件夹 这样就可以实时生成了。
我把_icon.scss贴出来：
CSS Code复制内容到剪贴板 $icon-qq:-262px-161px60px60px; $icon-email:-332px-161px60px60px; $icon-skype:-5px-252px60px60px; $icon-phone:-75px-252px60px60px; @mixinsprite-width($sprite){ width:nth($sprite,3); } @mixinsprite-height($sprite){ height:nth($sprite,4); } @mixinsprite-position($sprite){ $sprite-offset-x:nth($sprite,1); $sprite-offset-y:nth($sprite,2); background-position:$sprite-offset-x$sprite-offset-y; } @mixinsprite($sprite){ @includesprite-position($sprite); @includesprite-width($sprite); @includesprite-height($sprite); } .icon{ background-repeat:no-repeat; overflow:hidden; border:none; background:url('#{$icon-sprite-path}/icon.png?v=#{$version}'); @includeinline-block(); vertical-align:middle; font-style:normal; color:$icon-font-color; } .icon-qq{ @includesprite($icon-qq); } .icon-email{ @includesprite($icon-email); } .icon-skype{ @includesprite($icon-skype); } .icon-phone{ @includesprite($icon-phone); }使用的时候只需要加上类似class="icon icon-qq" 就可以了。
css-sprite的地址现在作者已经没有更新css-sprite了 现在叫sprity 配置差不多 sprity多了一些功能 有时间再介绍。
现在说下开头说的那个坑 就是安装的问题 微软的环境很难安装成功 因为依赖lwip 需要node-gyp重新编译 我自己的电脑安装好了 但是有些同事的电脑怎么配置都安装不成功。mac下还没有尝试 估计应该没什么问题 windows的环境比较操蛋。
如果你们也遇到安装的问题 能够解决的话 麻烦告知下啦。：）
来源：爱蒂网
