鍍金池/ 問答/HTML5  PHP  HTML/ 有沒有什么框架可以根據(jù)html中的樣式名稱動(dòng)態(tài)生成css

有沒有什么框架可以根據(jù)html中的樣式名稱動(dòng)態(tài)生成css

后端或前端javascript都可以。
類似這樣的需要

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

可以根據(jù)上面的html頁面，自動(dòng)生成

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

現(xiàn)在的bootstrap框架都是樣式提前寫好的。有時(shí)候這些通用的樣式內(nèi)置的不夠，可有動(dòng)態(tài)生成的框架

回答
編輯回答
安若晴
暫時(shí)沒有看到哪兒有，可以自己去實(shí) @yuanxiaowa

我先引用一下，然后寫一下我個(gè)人的看法，這種需求我覺得是有問題的，基本上沒有人會(huì)這么去操作，我建議引入sass工具來管理樣式。另外的話，可以考慮學(xué)習(xí)最新的前端基于數(shù)據(jù)來思考的框架，比如react，bootstrap是UI框架。

2018年8月25日 03:02
編輯回答
蝶戀花

如果需要，實(shí)現(xiàn)起來要不了幾行代碼啊。

# -*- 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, ';', '}'])
2018年4月1日 04:26
編輯回答
尤禮

暫時(shí)沒有看到哪兒有，可以自己去實(shí)現(xiàn)

2017年3月17日 06:35