雪碧图工具css-sprite指南_html/css_WEB-ITnose
程序员文章站
2022-04-26 23:48:55
...
可能是最好用的雪碧图工具了,好吧,至少是我用过最好用的。
首先安装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的地址
现在作者已经没有更新css-sprite了,现在叫sprity,配置差不多,sprity多了一些功能,有时间再介绍。
现在说下开头说的那个坑,就是安装的问题,微软的环境很难安装成功,因为依赖lwip,需要node-gyp重新编译,我自己的电脑安装好了,但是有些同事的电脑怎么配置都安装不成功。mac下还没有尝试,估计应该没什么问题,windows的环境比较操蛋。
如果你们也遇到安装的问题,能够解决的话,麻烦告知下啦。:)
上一篇: CSS 图片垂直居中的两种方法
推荐阅读
-
V4.0到来了,css雪碧图生成工具4.0更新啦_html/css_WEB-ITnose
-
css sprite,css雪碧图生成工具V3.0更新_html/css_WEB-ITnose
-
前端工程师技能之photoshop巧用(从效果图到雪碧图)5--理论篇_html/css_WEB-ITnose
-
compass自动生成雪碧图_html/css_WEB-ITnose
-
前端工程师技能之photoshop巧用(从效果图到雪碧图)5--理论篇_html/css_WEB-ITnose
-
compass自动生成雪碧图_html/css_WEB-ITnose
-
css雪碧图生成工具4.3更新_html/css_WEB-ITnose
-
Git@OSC 推荐|移动端css切片图合成雪碧图工具_html/css_WEB-ITnose
-
css 雪碧图的制作_html/css_WEB-ITnose
-
使用grunt对css中的background图片自动生成雪碧图_html/css_WEB-ITnose