css-sprite的使用方法

本篇內(nèi)容介紹了“css-sprite的使用方法”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

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

首先安裝css-sprite，安裝這里很坑，等我最后再說。

代碼如下:

npm install css-sprite

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

CSS Code復制內(nèi)容到剪貼板

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',          //雪碧圖合并的方向，也可以設(shè)置成垂直或水平   

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復制內(nèi)容到剪貼板

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}}  

搞定！就是那么簡單。

現(xiàn)在只需要把圖片丟到icon文件夾里面，運行下gulp sprites，就可以生成一張雪碧圖icon.png和相對應(yīng)的scss樣式文件_icon.scss了，也可以再新建一個監(jiān)聽的任務(wù)，監(jiān)聽icon文件夾，這樣就可以實時生成了。

我把_icon.scss貼出來：

CSS Code復制內(nèi)容到剪貼板

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的使用方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！