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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值