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