可能是最好用的雪碧图工具了，好吧，至少是我用过最好用的。

首先安装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的环境比较操蛋。

如果你们也遇到安装的问题，能够解决的话，麻烦告知下啦。：）