可能是最好用的雪碧图工具了,好吧,至少是我用过最好用的。
首先安装css-sprite
,安装这里很坑,等我最后再说。
npm install css-sprite
我是使用gulp
来构建前端代码,所以还需要安装gulp
和gulp-if
,安装好之后就可以开始配置啦。
task
: var gulp = require('gulp');var gulpif = require('gulp-if');gulp.task('sprites',function(){ gulp.src('img/icon/*.png') //这是要合并的图片的路径 .pipe(sprite({ name: 'icon', //定义一个名称 style: '_icon.scss', //这是生成的样式文件 format: 'png', //png格式的图片 orientation: 'left-right', //雪碧图合并的方向,也可以设置成垂直或水平 cssPath: '#{$icon-sprite-path}', //雪碧图的路径变量 template: './sprite-tpl.mustache', //scss生成的模板 processor: 'scss' //生成的样式文件的格式 })) .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));});
scss
的模板使用mustache
:
{ {#items}} ${ {name}}: { {px.offset_x}} { {px.offset_y}} { {px.width}} { {px.height}};{ {/items}}@mixin sprite-width($sprite) {width: nth($sprite, 3);}@mixin sprite-height($sprite) {height: nth($sprite, 4);}@mixin sprite-position($sprite) {$sprite-offset-x: nth($sprite, 1);$sprite-offset-y: nth($sprite, 2);background-position: $sprite-offset-x $sprite-offset-y;}@mixin sprite($sprite) {@include sprite-position($sprite);@include sprite-width($sprite);@include sprite-height($sprite);}{ {#sprite}} { {class}} { background-repeat: no-repeat; overflow: hidden; border: none; background: url('{ { {escaped_image}}}?v=#{$version}'); @include inline-block(); vertical-align: middle; font-style: normal; color:$icon-font-color; }{ {/sprite}}{ {#items}} .{ {name}}{ @include sprite(${ {name}}); }{ {/items}}
搞定!就是那么简单。
现在只需要把图片丢到icon
文件夹里面,运行下gulp sprites
,就可以生成一张雪碧图icon.png
和相对应的scss
样式文件_icon.scss
了,也可以再新建一个监听的任务,监听icon
文件夹,这样就可以实时生成了。
我把_icon.scss
贴出来:
$icon-qq: -262px -161px 60px 60px;$icon-email: -332px -161px 60px 60px;$icon-skype: -5px -252px 60px 60px;$icon-phone: -75px -252px 60px 60px;@mixin sprite-width($sprite) {width: nth($sprite, 3);}@mixin sprite-height($sprite) {height: nth($sprite, 4);}@mixin sprite-position($sprite) {$sprite-offset-x: nth($sprite, 1);$sprite-offset-y: nth($sprite, 2);background-position: $sprite-offset-x $sprite-offset-y;}@mixin sprite($sprite) {@include sprite-position($sprite);@include sprite-width($sprite);@include sprite-height($sprite);}.icon { background-repeat: no-repeat; overflow: hidden; border: none; background: url('#{$icon-sprite-path}/icon.png?v=#{$version}'); @include inline-block(); vertical-align: middle; font-style: normal; color:$icon-font-color;}.icon-qq{ @include sprite($icon-qq);}.icon-email{ @include sprite($icon-email);}.icon-skype{ @include sprite($icon-skype);}.icon-phone{ @include sprite($icon-phone);}
使用的时候只需要加上类似class="icon icon-qq"
,就可以了。
css-sprite
了,现在叫,配置差不多,sprity
多了一些功能,有时间再介绍。 现在说下开头说的那个坑,就是安装的问题,微软的环境很难安装成功,因为依赖lwip
,需要node-gyp
重新编译,我自己的电脑安装好了,但是有些同事的电脑怎么配置都安装不成功。mac
下还没有尝试,估计应该没什么问题,windows的环境比较操蛋。
如果你们也遇到安装的问题,能够解决的话,麻烦告知下啦。:)