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: utf8import osfrom 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

补充:

    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