生成雪碧圖的代碼
本文的樣式預(yù)處理使用的是stylus 如果須要用到其它類型的預(yù)處理器,可對下面的代碼進(jìn)行修改
如果想對雪碧圖的生成原理及參數(shù)有更深入的了解請移步
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的模板文件,須要針對不圖的樣式預(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")); });
這段代碼會在指定位置生成__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)用對應(yīng)圖片的函數(shù)以及公用函數(shù)即可
如下:
.xxx{ sicon() sicon-checkbox-checked-focus() }最后
希望對大家有用,平時(shí)不太愛寫文章。能寫上來的都是比較實(shí)用的東西
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/107318.html
摘要:預(yù)處理方案代表和預(yù)處理方案是預(yù)先指定需要生成的雪碧圖切片元素,由工具合成后,得到相應(yīng)的雪碧圖和數(shù)據(jù)文件,開發(fā)中將二者投入使用。預(yù)處理方案一般以頁面為單元組織雪碧圖。結(jié)語關(guān)于雪碧圖的處理方案的討論就到此結(jié)束了。 廣告:SF 里弄了個(gè) CSS 小圈子,歡迎一起來討論問題 前端小圖標(biāo)處理方案眾多,本文主要介紹基于雪碧圖的處理方案,分析雪碧圖的預(yù)處理和后處理模式的得與失,以及在項(xiàng)目中通常會遇到...
摘要:介紹是一個(gè)模塊化的雪碧圖生成工具會根據(jù)目錄中的圖片生成相應(yīng)的雪碧圖和樣式文件,支持圖,可以內(nèi)嵌編碼格式的圖,支持不同的圖片格式和有不同的圖片引擎可以選擇。 介紹 sprity 是一個(gè)模塊化的雪碧圖生成工具會根據(jù)目錄中的圖片生成相應(yīng)的雪碧圖和樣式文件,支持retina圖,可以內(nèi)嵌base64 編碼格式的圖,支持不同的圖片格式和有不同的圖片引擎可以選擇。sprity 的前身是css-sp...
摘要:無論是早期工具,還是現(xiàn)在流行的配合這類構(gòu)建工具而產(chǎn)生的雪碧圖插件。 本文原文鏈接:https://devework.com/postcss-...,轉(zhuǎn)載請注明原始來源,謝謝! showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一個(gè)基于PostCSS 開發(fā)的用于生成雪碧圖圖片及其C...
摘要:所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會在一個(gè)網(wǎng)站共存,自定義圖標(biāo)字體為什么比較耗時(shí),且太復(fù)雜圖標(biāo)無法實(shí)現(xiàn)請往下看開發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文,...
摘要:編寫配置文件,以下是關(guān)鍵配置代碼雪碧圖合并輸出到文件參數(shù)執(zhí)行目錄參數(shù)生成的和圖片的文件名之所以推薦,是因?yàn)榉浅5撵`活,看懂模塊的可以根據(jù)你的項(xiàng)目情況編寫對應(yīng)的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 網(wǎng)站開發(fā)90%會用到小圖標(biāo), 多小圖標(biāo)調(diào)用顯示是前端開發(fā)常見的問題;目前小圖標(biāo)顯示常見有兩種方式...
閱讀 3581·2023-04-26 02:55
閱讀 2849·2021-11-02 14:38
閱讀 4135·2021-10-21 09:39
閱讀 2842·2021-09-27 13:36
閱讀 3943·2021-09-22 15:08
閱讀 2643·2021-09-08 10:42
閱讀 2802·2019-08-29 12:21
閱讀 667·2019-08-29 11:22