css-sprite使用详解

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

首先安装css-sprite，安装这里很坑，等我最后再说。

我是使用gulp来构建前端代码，所以还需要安装gulp和gulp-if,安装好之后就可以开始配置啦。
新建一个task:

1. var gulp = require('gulp');   
2. var gulpif = require('gulp-if');   
3.   
4. gulp.task('sprites',function(){   
5.     gulp.src('img/icon/*.png')                  //这是要合并的图片的路径   
6.         .pipe(sprite({   
7.             name: 'icon',                       //定义一个名称   
8.             style: '_icon.scss',                //这是生成的样式文件   
9.             format: 'png',                      //png格式的图片   
10.             orientation: 'left-right',          //雪碧图合并的方向，也可以设置成垂直或水平   
11.             cssPath: '#{$icon-sprite-path}',    //雪碧图的路径变量   
12.             template: './sprite-tpl.mustache',  //scss生成的模板   
13.             processor: 'scss'                   //生成的样式文件的格式   
14.         }))   
15.         .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));   
16. });  

scss的模板使用mustache：

1. {{#items}}   
2.     ${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};   
3. {{/items}}   
4.   
5. @mixin sprite-width($sprite) {   
6. width: nth($sprite, 3);   
7. }   
8.   
9. @mixin sprite-height($sprite) {   
10. height: nth($sprite, 4);   
11. }   
12.   
13. @mixin sprite-position($sprite) {   
14. $sprite-offset-x: nth($sprite, 1);   
15. $sprite-offset-y: nth($sprite, 2);   
16. background-position: $sprite-offset-x  $sprite-offset-y;   
17. }   
18.   
19. @mixin sprite($sprite) {   
20. @include sprite-position($sprite);   
21.   
22. @include sprite-width($sprite);   
23. @include sprite-height($sprite);   
24.   
25. }   
26.   
27. {{#sprite}}   
28.     {{class}} {   
29.     background-repeat: no-repeat;   
30.     overflow: hidden;   
31.     border: none;   
32.     background: url('{{{escaped_image}}}?v=#{$version}');   
33.     @include inline-block();   
34.     vertical-align