亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

雪碧圖生成以及配合預(yù)處理樣式的使用

superw / 2146人閱讀

生成雪碧圖的代碼

本文的樣式預(yù)處理使用的是stylus 如果須要用到其它類(lèi)型的預(yù)處理器，可對(duì)下面的代碼進(jìn)行修改
如果想對(duì)雪碧圖的生成原理及參數(shù)有更深入的了解請(qǐng)移步

spritesmith

gulp.spritesmith

const spritesmith = require("gulp.spritesmith");
gulp.task("sprite", () => {
  var spriteData = gulp.src("./src/styles/img/icons/*.png").pipe(
    spritesmith({
      // 生成雪碧圖的位置以及名稱(chēng)
      imgName: "img/sprite.png",
      // 生成的雪碧圖的樣式位置
      cssName: "__sprite.styl",
      // 雪碧圖中圖片與圖片的padding
      padding: 5,
      // 雪碧圖中圖片的排列方式
      algorithm: "binary-tree",
      // 這里是生成__sprite.styl的模板文件，須要針對(duì)不圖的樣式預(yù)處理器進(jìn)行個(gè)人的修改
      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"));
});

這段代碼會(huì)在指定位置生成__sprite.styl的函數(shù)集合文件

生成的__sprite.styl格式如下(生成的格式取決于cssTemplate的內(nèi)容)： 
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()    
    }
}
使用 全局使用

可以在入口處調(diào)用sprites()函數(shù)，生成全局樣式

局部使用

調(diào)用對(duì)應(yīng)圖片的函數(shù)以及公用函數(shù)即可
如下：

.xxx{
    sicon()
    sicon-checkbox-checked-focus()
}
最后

希望對(duì)大家有用，平時(shí)不太愛(ài)寫(xiě)文章。能寫(xiě)上來(lái)的都是比較實(shí)用的東西

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107318.html

相關(guān)文章

  • CSS > 關(guān)于雪碧圖預(yù)處理和后處理方案的討論

    摘要：預(yù)處理方案代表和預(yù)處理方案是預(yù)先指定需要生成的雪碧圖切片元素，由工具合成后，得到相應(yīng)的雪碧圖和數(shù)據(jù)文件，開(kāi)發(fā)中將二者投入使用。預(yù)處理方案一般以頁(yè)面為單元組織雪碧圖。結(jié)語(yǔ)關(guān)于雪碧圖的處理方案的討論就到此結(jié)束了。 廣告：SF 里弄了個(gè) CSS 小圈子，歡迎一起來(lái)討論問(wèn)題 前端小圖標(biāo)處理方案眾多，本文主要介紹基于雪碧圖的處理方案，分析雪碧圖的預(yù)處理和后處理模式的得與失，以及在項(xiàng)目中通常會(huì)遇到...

    hyuan 評(píng)論0 收藏0

  • 雪碧圖sprity 合并多圖使用心得

    摘要：介紹是一個(gè)模塊化的雪碧圖生成工具會(huì)根據(jù)目錄中的圖片生成相應(yīng)的雪碧圖和樣式文件，支持圖，可以?xún)?nèi)嵌編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。 介紹 sprity 是一個(gè)模塊化的雪碧圖生成工具會(huì)根據(jù)目錄中的圖片生成相應(yīng)的雪碧圖和樣式文件，支持retina圖，可以?xún)?nèi)嵌base64 編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。sprity 的前身是css-sp...

    vboy1010 評(píng)論0 收藏0

  • postcss-lazysprite: 一種生成CSS 雪碧圖的懶惰姿勢(shì)

    摘要：無(wú)論是早期工具，還是現(xiàn)在流行的配合這類(lèi)構(gòu)建工具而產(chǎn)生的雪碧圖插件。 本文原文鏈接：https://devework.com/postcss-...，轉(zhuǎn)載請(qǐng)注明原始來(lái)源，謝謝！ showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一個(gè)基于PostCSS 開(kāi)發(fā)的用于生成雪碧圖圖片及其C...

    BearyChat 評(píng)論0 收藏0

  • iconfont實(shí)踐小結(jié)

    摘要：所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會(huì)在一個(gè)網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時(shí)，且太復(fù)雜圖標(biāo)無(wú)法實(shí)現(xiàn)請(qǐng)往下看開(kāi)發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級(jí)技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對(duì)應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫(xiě)了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評(píng)論0 收藏0

  • 淺談 CSS Sprites 雪碧圖應(yīng)用

    摘要：編寫(xiě)配置文件，以下是關(guān)鍵配置代碼雪碧圖合并輸出到文件參數(shù)執(zhí)行目錄參數(shù)生成的和圖片的文件名之所以推薦，是因?yàn)榉浅５撵`活，看懂模塊的可以根據(jù)你的項(xiàng)目情況編寫(xiě)對(duì)應(yīng)的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 網(wǎng)站開(kāi)發(fā)90%會(huì)用到小圖標(biāo)， 多小圖標(biāo)調(diào)用顯示是前端開(kāi)發(fā)常見(jiàn)的問(wèn)題；目前小圖標(biāo)顯示常見(jiàn)有兩種方式...

    MkkHou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<