以编程方式将样式表分成子样式表？

Question

假设你有一个巨大的样式表,里面有一个完整的网站选择器,每个都加载了属性(定位,大小调整,字体,颜色等等),你想把它们分成不同的,适当的文件(例如字体) .css,colors.css,layout.css等..)..

是否有任何已知(自动)方法来完成这样的任务？

例:

#myid {
display:block;
width:100px;
height:100px;
border:1px solid #f00;
background-color:#f00;
font-size:.75em;
color:#000;
}

将转换为以下3个文件:

layout.css中:

#myid {
    display:block;
    width:100px;
    height:100px;
}

color.css:

#myid {
    border:1px solid #f00;
    background-color:#f00;
    color:#000;
}

fonts.css:

#myid {
    font-size:.75em;
}

我的例子可能没有利用最好的约定来实现这一点,但是我认为在框架创建中自动将属性分离到不同文件中的方法非常方便.

Answer 1

我是这样做的:

1. 将大样式表复制到3个文件.
2. 打开每个并删除不需要的样式.

对于第2步,您可以通过在Notepad ++等编辑器中使用搜索/替换来节省大量时间.例如,在layout.css中,您可以进行正则表达式搜索^.*background:.+$并替换为空.(然后在最后删除所有空白行.)

从理论上讲,你应该能够将每个文件只减少到几个正则数,但Notepad ++似乎不喜欢管道字符或括号.^.*background(-color|-image)?:.+$应该工作,但事实并非如此.

这不是程序化的,但是当您编写自己的代码来执行您所要求的操作时,TBH可以从头开始键入样式表.

Answer 2

滚动你自己.有效的CSS不应该非常难以解析.

• 拆分整个文件 }
• 在每一个中,{选择器之前的是什么
• 拆分后面{的内容;,为每个选择器获取每个单独的规则
• 评估每个规则并相应地构建文件

半伪VB.NET代码......

 Dim CssFile as String = System.IO.File.ReadAllText("MyFile.css")
 Dim CssRules as String() = CssFile.Split("}")

 For Each Rule as String in CssRules
     Dim Selector as String = Rule.Substring(0, Rule.IndexOf("{")).Trim();
     Dim Styles as String() = Rule.Substring(Rule.IndexOf("{") + 1).Trim().Split(";");

     For Each Style as String in Styles
         If Style.StartsWith("font") Then 
              ' Build your files... yada, yada, yada
         End If
     Next
 Next

Answer 3

你有命令行grep吗？你关心输出中的评论吗？你能做第一遍清理格式吗？例如,在你选择的编辑保证{,}以及;后跟一个新行.然后这些可能会让你接近:

grep -i '[{]\|[}]\|background\|border\|color' source.css > color.css
grep -i '[{]\|[}]\|font\|letter\|line-height' source.css > font.css
grep -v 'background\|border\|color\|font\|letter\|line-height' source.css > layout.css

你必须做出调整,如果你不希望在任何layout.css中下列标签:outline-*,text-*,white-space,word-spacing.那就是你的css使用它们.我还会快速查看您实际使用的标签.例如,

grep -v '[{]\|[}]' test2.css | sed -e 's/:.*$//g' | sort -u

Answer 4

这应该让你开始:

#!/usr/bin/env python
import cssutils

PATH_TO_CSS_FILE = 'old_huge_css_file.css'

LAYOUT = ('display', 'width', 'height', 'margin', 'padding',
          'position', 'top', 'left', 'bottom', 'right')
COLOR = ('color', 'background', 'border', 'background-color')
FONTS = ('font', 'font-size')

def strip_styles(infile_path, outfile_path, properties_to_keep):
    stylesheet = cssutils.parseFile(infile_path)

    for rule in stylesheet:
        if not rule.type == rule.STYLE_RULE:
            continue

        [ rule.style.removeProperty(p) for p in rule.style.keys() 
            if not p in properties_to_keep ]

    f = open(outfile_path, 'w')
    f.write(stylesheet.cssText)
    f.close()

segments = (
    ('layout.css', LAYOUT),
    ('color.css', COLOR),
    ('fonts.css', FONTS),
)

for segment in segments:
    strip_styles(PATH_TO_CSS_FILE, *segment)

你需要CssUtils

显然,我没有在每个可能的css属性的开头填充元组.我将把它作为练习留给读者

注意:它会将所有注释留在样式表中,即使其中许多注释与分离的样式无关.

此外,所有的款式不在列举LAYOUT,COLOR以及FONTS在顶部的变量将被过滤掉.

您可以轻松修改strip_styles函数以过滤掉这三个变量中的样式,以生成包含所有misc的第4个样式表.你喜欢的属性