有没有什么框架可以根据html中的样式名称动态生成css

Question

后端或前端javascript都可以。
类似这样的需要

<div class="p-l-10 f-10 c-red"></div>

可以根据上面的html页面，自动生成

.p-l-10{
   padding-left:10px;
}
.f-10{
   font-size:10px;
}
.c-red{
   color:red;
}

现在的bootstrap框架都是样式提前写好的。有时候这些通用的样式内置的不够，可有动态生成的框架

Answer 1

暂时没有看到哪儿有，可以自己去实现

Answer 2

如果需要，实现起来要不了几行代码啊。

# -*- coding: utf-8 -*-

import re

s = '''
<div class="f-10 p-l-10">
    <div class="c-red">ddd</div>
</div>
'''

rule = {
    'f': 'font-size',
    'p-l': 'padding-left',
    'c': 'color',
}

css = {}
r = re.findall('class="(.*?)"', s)
for g in r:
    for p in g.split(' '):
        t = p.split('-')
        name = '-'.join(t[0:-1])
        value = t[-1]
        if name in rule and name not in css:
            v = [rule[name], ': ', value]
            if value.isdigit():
                v.append('px')
            css[name + '-' + value] = ''.join(v);

for k, v in css.items():
    print ''.join(['.', k, '{', v, ';', '}'])

Answer 3

暂时没有看到哪儿有，可以自己去实 @yuanxiaowa

我先引用一下，然后写一下我个人的看法，这种需求我觉得是有问题的，基本上没有人会这么去操作，我建议引入sass工具来管理样式。另外的话，可以考虑学习最新的前端基于数据来思考的框架，比如react，bootstrap是UI框架。