css-sprite的使用方法
本篇内容介绍了“css-sprite的使用方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
可能是最好用的雪碧图工具了，好吧，至少是我用过最好用的。
首先安装css-sprite，安装这里很坑，等我最后再说。
代码如下:
npm install css-sprite
我是使用gulp来构建前端代码，所以还需要安装gulp和gulp-if,安装好之后就可以开始配置啦。
新建一个task:
CSS Code复制内容到剪贴板
var gulp = require('gulp');
var gulpif = require('gulp-if');
gulp.task('sprites',function(){
gulp.class="lazy" data-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}}
@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贴出来：
CSS Code复制内容到剪贴板
$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的使用方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
