雪碧图生成以及配合预处理样式的使用

superw 发布于2019-08-26 11:39 / 1990人阅读

生成雪碧图的代码

本文的样式预处理使用的是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(
            "	.sicon-N {	
		sicon-N()	
	}".replace(/N/g, sprite.name)
          );
        });
        return (
          shared + "
" +
          fuc.join("
") +
          "
sprites(){
	" +
          ".sicon{
		sicon()
	}" +
          "
" +
          perSprite.join("
") +
          "
}"
        );
      }
    })
  );

  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()
}

最后

希望对大家有用，平时不太爱写文章。能写上来的都是比较实用的东西

云服务器服务器托管 html使用雪碧图雪碧图亚马逊云服务器租用以及使用阿里云服务器怎么和小程序配合使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107318.html

CSS > 关于雪碧图预处理和后处理方案的讨论

摘要：预处理方案代表和预处理方案是预先指定需要生成的雪碧图切片元素，由工具合成后，得到相应的雪碧图和数据文件，开发中将二者投入使用。预处理方案一般以页面为单元组织雪碧图。结语关于雪碧图的处理方案的讨论就到此结束了。广告：SF 里弄了个 CSS 小圈子，欢迎一起来讨论问题前端小图标处理方案众多，本文主要介绍基于雪碧图的处理方案，分析雪碧图的预处理和后处理模式的得与失，以及在项目中通常会遇到...

hyuan 2019-08-30 15:53 评论0 收藏0
雪碧图sprity 合并多图使用心得

摘要：介绍是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件，支持图，可以内嵌编码格式的图，支持不同的图片格式和有不同的图片引擎可以选择。介绍 sprity 是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件，支持retina图，可以内嵌base64 编码格式的图，支持不同的图片格式和有不同的图片引擎可以选择。sprity 的前身是css-sp...

vboy1010 2019-08-28 18:29 评论0 收藏0
postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势

摘要：无论是早期工具，还是现在流行的配合这类构建工具而产生的雪碧图插件。本文原文链接：https://devework.com/postcss-...，转载请注明原始来源，谢谢！ showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其C...

BearyChat 2019-08-29 12:48 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
浅谈 CSS Sprites 雪碧图应用

摘要：编写配置文件，以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐，是因为非常的灵活，看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言网站开发90%会用到小图标，多小图标调用显示是前端开发常见的问题；目前小图标显示常见有两种方式...

MkkHou 2019-08-30 13:12 评论0 收藏0