Icon class生成器（Python）

Icon class生成器（Python）

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

搬磚步驟：

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

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

2. 運行腳本

   • python iconClass.py

3. 將輸出的內容copy到一個可以格式化的地方（比如webstream）
   

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

5. 最後結構：

/*以下參照UI20161220提供的圖標*/

@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 b

path = 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

補充:

    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