css-sprite使用详解

前端  /  管理员 发布于 8年前   258

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

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

复制代码代码如下:npm install css-sprite

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

CSS Code复制内容到剪贴板

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：

CSS Code复制内容到剪贴板

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: middle;   
35.     font-style: normal;   
36.     color:$icon-font-color;   
37.     }   
38. {{/sprite}}   
39.   
40. {{#items}}   
41.     .{{name}}{   
42.     @include sprite(${{name}});   
43.     }   
44. {{/items}}  

搞定！就是那么简单。

现在只需要把图片丢到icon文件夹里面，运行下gulp sprites，就可以生成一张雪碧图icon.png和相对应的scss样式文件_icon.scss了，也可以再新建一个监听的任务，监听icon文件夹，这样就可以实时生成了。

我把_icon.scss贴出来：

CSS Code复制内容到剪贴板

1. $icon-qq: -262px -161px 60px 60px;   
2. $icon-email: -332px -161px 60px 60px;   
3. $icon-skype: -5px -252px 60px 60px;   
4. $icon-phone: -75px -252px 60px 60px;   
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. .icon {   
27.     background-repeat: no-repeat;   
28.     overflow: hidden;   
29.     border: none;   
30.     background: url('#{$icon-sprite-path}/icon.png?v=#{$version}');   
31.     @include inline-block();   
32.     vertical-align: middle;   
33.     font-style: normal;   
34.     color:$icon-font-color;   
35. }   
36. .icon-qq{   
37.     @include sprite($icon-qq);   
38. }   
39. .icon-email{   
40.     @include sprite($icon-email);   
41. }   
42. .icon-skype{   
43.     @include sprite($icon-skype);   
44. }   
45. .icon-phone{   
46.     @include sprite($icon-phone);   
47. }  

使用的时候只需要加上类似class="icon icon-qq"，就可以了。

css-sprite的地址
现在作者已经没有更新css-sprite了，现在叫sprity，配置差不多，sprity多了一些功能，有时间再介绍。

现在说下开头说的那个坑，就是安装的问题，微软的环境很难安装成功，因为依赖lwip，需要node-gyp重新编译，我自己的电脑安装好了，但是有些同事的电脑怎么配置都安装不成功。mac下还没有尝试，估计应该没什么问题，windows的环境比较操蛋。

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