DIV CSS 佈局教程網

這篇文章主要介紹了css-sprite的使用詳解,CSS-sprite是一個經常被用來合並前端圖片的工具.需要的朋友可以參考下

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

首先安裝CSS-sprite，安裝這裡很坑，等我最後再說。

復制代碼代碼如下: npm install CSS-sprite

我是使用gulp來構建前端代碼，所以還需要安裝gulp和gulp-if,安裝好之後就可以開始配置啦。
新建一個task:

CSS Code復制內容到剪貼板

1. var gulp = require('gulp');
2. var gulpif = require('gulp-if');
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}}
5. @mixin sprite-width($sprite) {
6. width: nth($sprite, 3);
7. }
9. @mixin sprite-height($sprite) {
10. height: nth($sprite, 4);
11. }
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. }
19. @mixin sprite($sprite) {
20. @include sprite-position($sprite);
22. @include sprite-width($sprite);
23. @include sprite-height($sprite);
25. }
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}}
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. }
9. @mixin sprite-height($sprite) {
10. height: nth($sprite, 4);
11. }
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. }
19. @mixin sprite($sprite) {
20. @include sprite-position($sprite);
22. @include sprite-width($sprite);
23. @include sprite-height($sprite);
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的環境比較操蛋。

如果你們也遇到安裝的問題，能夠解決的話，麻煩告知下啦。：）