可能是最好用的雪碧图工具了，好吧，至少是我用过最好用的。
首先安装css-sprite，安装这里很坑，等我最后再说。
复制代码代码如下:npm install css-sprite
我是使用gulp来构建前端代码，所以还需要安装gulp和gulp-if,安装好之后就可以开始配置啦。
新建一个task:
CSS Code复制内容到剪贴板 var gulp = require(gulp); var gulpif = 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}} @mixin sprite-width($sprite) { width: nth($sprite, 3); } @mixin sprite-height($sprite) { height: nth($sprite, 4); } @mixin sprite-position($sprite) { $sprite-offset-x: nth($sprite, 1); $sprite-offset-y: nth($sprite, 2); background-position: $sprite-offset-x $sprite-offset-y; } @mixin sprite($sprite) { @include sprite-position($sprite); @include sprite-width($sprite); @include sprite-height($sprite); } {{#sprite}} {{class}} { background-repeat: no-repeat; overflow: hidden; border: none; background: url({{{escaped_image}}}?v=#{$version}); @include inline-block(); vertical-align: middle; font-style: normal; color:$icon-font-color; } {{/sprite}} {{#items}} .{{name}}{ @include sprite(${{name}}); } {{/items}} 搞定！就是那么简单。
现在只需要把图片丢到icon文件夹里面，运行下gulp sprites，就可以生成一张雪碧图icon.png和相对应的scss样式文件_icon.scss了，也可以再新建一个监听的任务，监听icon文件夹，这样就可以实时生成了。
我把_icon.scss贴出来：
CSS Code复制内容到剪贴板 $icon-qq: -262px -161px 60px 60px; $icon-email: -332px -161px 60px 60px; $icon-skype: -5px -252px 60px 60px; $icon-phone: -75px -252px 60px 60px; @mixin sprite-width($sprite) { width: nth($sprite, 3); } @mixin sprite-height($sprite) { height: nth($sprite, 4); } @mixin sprite-position($sprite) { $sprite-offset-x: nth($sprite, 1); $sprite-offset-y: nth($sprite, 2); background-position: $sprite-offset-x $sprite-offset-y; } @mixin sprite($sprite) { @include sprite-position($sprite); @include sprite-width($sprite); @include sprite-height($sprite); } .icon { background-repeat: no-repeat; overflow: hidden; border: none; background: url(#{$icon-sprite-path}/icon.png?v=#{$version}); @include inline-block(); vertical-align: middle; font-style: normal; color:$icon-font-color; } .icon-qq{ @include sprite($icon-qq); } .icon-email{ @include sprite($icon-email); } .icon-skype{ @include sprite($icon-skype); } .icon-phone{ @include sprite($icon-phone); } 使用的时候只需要加上类似class="icon icon-qq"，就可以了。
css-sprite的地址
现在作者已经没有更新css-sprite了，现在叫sprity，配置差不多，sprity多了一些功能，有时间再介绍。
现在说下开头说的那个坑，就是安装的问题，微软的环境很难安装成功，因为依赖lwip，需要node-gyp重新编译，我自己的电脑安装好了，但是有些同事的电脑怎么配置都安装不成功。mac下还没有尝试，估计应该没什么问题，windows的环境比较操蛋。
如果你们也遇到安装的问题，能够解决的话，麻烦告知下啦。：）
