css-sprite使用详解

当前位置 : 首页 > 网页制作 > CSS > css-sprite使用详解

css-sprite使用详解

来源: 作者: 时间:2015-10-30 09:30
这篇文章主要介绍了css-sprite的使用详解,css-sprite是一个经常被用来合并前端图片的工具.需要的朋友可以参考下
这篇文章主要介绍了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');   
  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-repeatno-repeat;   
  30.     overflowhidden;   
  31.     bordernone;   
  32.     backgroundurl('{{{escaped_image}}}?v=#{$version}');   
  33.     @include inline-block();   
  34.     vertical-alignmiddle;   
  35.     font-stylenormal;   
  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-repeatno-repeat;   
  28.     overflowhidden;   
  29.     bordernone;   
  30.     backgroundurl('#{$icon-sprite-path}/icon.png?v=#{$version}');   
  31.     @include inline-block();   
  32.     vertical-alignmiddle;   
  33.     font-stylenormal;   
  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了,现在叫sprity,配置差不多,多了一些功能,有时间再介绍。

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

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

Tag:

相关文章

网友评论

<