雪碧图天生以及合营预处理款式的运用

本文的款式预处理运用的是stylus 假如需要用到别的范例的预处理器，可对下面的代码举行修正
假如想对雪碧图的天生道理及参数有更深切的相识请移步

• spritesmith
• gulp.spritesmith

const spritesmith = require("gulp.spritesmith");
gulp.task("sprite", () => {
var spriteData = gulp.src("./src/styles/img/icons/*.png").pipe(
spritesmith({
// 天生雪碧图的位置以及称号
imgName: "img/sprite.png",
// 天生的雪碧图的款式位置
cssName: "__sprite.styl",
// 雪碧图中图片与图片的padding
padding: 5,
// 雪碧图中图片的分列体式格局
algorithm: "binary-tree",
// 这里是天生__sprite.styl的模板文件，需要针对不图的款式预处理器举行个人的修正
cssTemplate(data) {
var fuc = [];
var perSprite = [];
var shared = "sicon() { background-image: url(I); display: inline-block; vertical-align: middle; position: relative; top: -2px; background-size: Wpx Hpx; }"
.replace("I", data.spritesheet.image)
.replace("W", data.spritesheet.width)
.replace("H", data.spritesheet.height);
Array.prototype.forEach.call(data.sprites, function(sprite) {
fuc.push(
"sicon-N() { width: Wpx; height: Hpx; background-position: Xpx Ypx; }"
.replace(/N/g, sprite.name)
.replace("W", sprite.width)
.replace("H", sprite.height)
.replace("X", sprite.offset_x)
.replace("Y", sprite.offset_y)
);
perSprite.push(
"\t.sicon-N {\t\n\t\tsicon-N()\t\n\t}".replace(/N/g, sprite.name)
);
});
return (
shared + '\n' +
fuc.join("\n") +
"\nsprites(){\n\t" +
".sicon{\n\t\tsicon()\n\t}" +
"\n" +
perSprite.join("\n") +
"\n}"
);
}
})
);
return spriteData.pipe(gulp.dest("./src/styles"));
});

这段代码会在指定位置天生__sprite.styl的函数鸠合文件

天生的__sprite.styl花样以下(天生的花样取决于cssTemplate的内容)：

sicon() {
background-image: url(img/sprite.png);
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
background-size: 286px 256px;
}
sicon-checkbox-checked-focus() {
width: 17px;
height: 17px;
background-position: -22px -220px;
}
sprites(){
.sicon{
sicon()
}
.sicon-checkbox-checked-focus {
sicon-checkbox-checked-focus()
}
}运用

全局运用

能够在入口处挪用sprites()函数，天生全局款式

部分运用

挪用对应图片的函数以及公用函数即可
以下：


.xxx{
sicon()
sicon-checkbox-checked-focus()
}
末了

愿望对人人有效，日常平凡不太爱写文章。能写上来的都是比较有用的东西