如果你不满意你的现状,要么开始改变,要么就闭嘴。这年头一点都不缺爱情,缺的是把爱情当真的人。
可能是最好用的雪碧图工具了,好吧,至少是我用过最好用的。
首先安装css-sprite,安装这里很坑,等我最后再说。
复制代码
代码如下:npm install css-sprite
我是使用gulp来构建前端代码,所以还需要安装gulp和gulp-if,安装好之后就可以开始配置啦。
新建一个task:
CSS Code复制内容到剪贴板
- vargulp=require('gulp');
- vargulpif=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:
CSS Code复制内容到剪贴板
- {{#items}}
- ${{name}}:{{px.offset_x}}{{px.offset_y}}{{px.width}}{{px.height}};
- {{/items}}
- @mixinsprite-width($sprite){
- width:nth($sprite,3);
- }
- @mixinsprite-height($sprite){
- height:nth($sprite,4);
- }
- @mixinsprite-position($sprite){
- $sprite-offset-x:nth($sprite,1);
- $sprite-offset-y:nth($sprite,2);
- background-position:$sprite-offset-x$sprite-offset-y;
- }
- @mixinsprite($sprite){
- @includesprite-position($sprite);
- @includesprite-width($sprite);
- @includesprite-height($sprite);
- }
- {{#sprite}}
- {{class}}{
- background-repeat:no-repeat;
- overflow:hidden;
- border:none;
- background:url('{{{escaped_image}}}?v=#{$version}');
- @includeinline-block();
- vertical-align:middle;
- font-style:normal;
- color:$icon-font-color;
- }
- {{/sprite}}
- {{#items}}
- .{{name}}{
- @includesprite(${{name}});
- }
- {{/items}}
搞定!就是那么简单。
现在只需要把图片丢到icon文件夹里面,运行下gulp sprites,就可以生成一张雪碧图icon.png和相对应的scss样式文件_icon.scss了,也可以再新建一个监听的任务,监听icon文件夹,这样就可以实时生成了。
我把_icon.scss贴出来:
CSS Code复制内容到剪贴板
- $icon-qq:-262px-161px60px60px;
- $icon-email:-332px-161px60px60px;
- $icon-skype:-5px-252px60px60px;
- $icon-phone:-75px-252px60px60px;
- @mixinsprite-width($sprite){
- width:nth($sprite,3);
- }
- @mixinsprite-height($sprite){
- height:nth($sprite,4);
- }
- @mixinsprite-position($sprite){
- $sprite-offset-x:nth($sprite,1);
- $sprite-offset-y:nth($sprite,2);
- background-position:$sprite-offset-x$sprite-offset-y;
- }
- @mixinsprite($sprite){
- @includesprite-position($sprite);
- @includesprite-width($sprite);
- @includesprite-height($sprite);
- }
- .icon{
- background-repeat:no-repeat;
- overflow:hidden;
- border:none;
- background:url('#{$icon-sprite-path}/icon.png?v=#{$version}');
- @includeinline-block();
- vertical-align:middle;
- font-style:normal;
- color:$icon-font-color;
- }
- .icon-qq{
- @includesprite($icon-qq);
- }
- .icon-email{
- @includesprite($icon-email);
- }
- .icon-skype{
- @includesprite($icon-skype);
- }
- .icon-phone{
- @includesprite($icon-phone);
- }
使用的时候只需要加上类似class="icon icon-qq",就可以了。
css-sprite的地址
现在作者已经没有更新css-sprite了,现在叫sprity,配置差不多,sprity多了一些功能,有时间再介绍。
现在说下开头说的那个坑,就是安装的问题,微软的环境很难安装成功,因为依赖lwip,需要node-gyp重新编译,我自己的电脑安装好了,但是有些同事的电脑怎么配置都安装不成功。mac下还没有尝试,估计应该没什么问题,windows的环境比较操蛋。
如果你们也遇到安装的问题,能够解决的话,麻烦告知下啦。:)
本文css-sprite如何使用详解到此结束。既然上了生活的贼船,那就做一个快乐的海盗。小编再次感谢大家对我们的支持!