Icon class生成器（Python）

先說起因，項(xiàng)目中有很多圖標(biāo)，需要把美工給的三種尺寸的png加工成class來用，這樣的好處就不必說了。但是圖標(biāo)數(shù)量比較大，以后換膚的時候，更是純搬磚的活，寫了個腳本來解放一下以后寫icon的class的搬運(yùn)工。

搬磚步驟：

所有的icon的一倍圖片，與本腳本放到一起（全部英文命名）

• 圖片命名與class一致,對應(yīng)三種尺寸標(biāo)記為1,2,3號.所有圖片存儲位置為:src/public/assets/images.
• class命名: 圖標(biāo)名稱+圖標(biāo)狀態(tài)(N:normal;O:on;C:click;D:disable)
• 使用者不關(guān)心圖片大小.(^o^)/~
• 注:圖標(biāo)最多有4種情況,個別圖標(biāo)可能不足4種,請勿強(qiáng)求.
  

運(yùn)行腳本

• python iconClass.py

將輸出的內(nèi)容copy到一個可以格式化的地方（比如webstream）

格式化一下，然后利用全局替換，把圖片路徑換一下。

最后結(jié)構(gòu)：

/*以下參照UI20161220提供的圖標(biāo)*/@media all and (max-width: 1280px) {/*置頂*/.putTopN {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopN1.png) no-repeat;background-size: 100% 100%;}.putTopN:hover {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopC1.png) no-repeat;background-size: 100% 100%;}.putTopC {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopC1.png) no-repeat;background-size: 100% 100%;}.putTopD {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopD1.png) no-repeat;background-size: 100% 100%;} }@media all and (min-width: 1280px) and (max-width: 1920px) {/*置頂*/.putTopN {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopN2.png) no-repeat;background-size: 100% 100%;}.putTopN:hover {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopC2.png) no-repeat;background-size: 100% 100%;}.putTopC {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopC2.png) no-repeat;background-size: 100% 100%;}.putTopD {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopD2.png) no-repeat;background-size: 100% 100%;} }@media all and (min-width: 1920px) {/*置頂*/.putTopN {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopN3.png) no-repeat;background-size: 100% 100%;}.putTopN:hover {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopC3.png) no-repeat;background-size: 100% 100%;}.putTopC {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopC3.png) no-repeat;background-size: 100% 100%;}.putTopD {display: inline-block;width: 18px;height: 18px;background: url(../images/putTopD3.png) no-repeat;background-size: 100% 100%;} }

---

附源碼

# coding: utf8 import os from PIL import Image # 獲取指定圖片的長和寬 def imgSize(imgPath):img = Image.open(imgPath)return img.size# 獲得.png的圖片 def judjepng(filename):if os.path.isfile( filename ):a,b = os.path.splitext( filename )if b == ".png":return 1;else:return 0;def getFileList( p ):p = str( p )if p=="":return [ ]if p[ -1] != "/":p = p+"/"a = os.listdir( p )b = [ x for x in a if judjepng( p + x )==1 ]return bpath = os.getcwd(); imgPaths = getFileList( path ) for imgPath1 in imgPaths:a,b = os.path.splitext( imgPath1 )imgsize = imgSize(imgPath1)classname = "." + a[:-1] +"{display: inline-block;width: "+str(imgsize[0])+"px;height: "+str(imgsize[1])+"px;background: url(../images/"+ a +".png) no-repeat;background-size: 100% 100%;}"print classname

補(bǔ)充:

classname = "." + a[:-2] +"N:hover{display: inline-block;width: "+str(imgsize[0])+"px;height: "+str(imgsize[1])+"px;background: url(../images/"+ a +".png) no-repeat;background-size: 100% 100%;}"# classname = "." + a[:-1] +"{display: inline-block;width: "+str(imgsize[0])+"px;height: "+str(imgsize[1])+"px;background: url(../images/"+ a +".png) no-repeat;background-size: 100% 100%;}"# print " <td><span class=\" "+ a[:-1] + "\"></span></td><td>" + a[:-1] + "</td>"print classname

總結(jié)

以上是生活随笔為你收集整理的Icon class生成器（Python）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。