假设您有一个巨大的样式表,其中包含整个站点的选择器,每个选择器都加载了其中的属性(定位、大小、字体、颜色等......全部在一起)并且您希望将它们分成不同的、适当的文件(例如 fonts.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 个文件:
布局.css:
#myid {
display:block;
width:100px;
height:100px;
}
颜色.css:
#myid {
border:1px solid #f00;
background-color:#f00;
color:#000;
}
字体.css:
#myid {
font-size:.75em;
}
我的示例可能没有使用最佳约定来执行此操作,但我想,一种将属性自动分离到不同文件中的方法在框架创建中会非常方便。
最佳答案
这是我的做法:
- 将您的大样式表复制到 3 个文件。
- 打开每一个并删除不需要的样式。
对于第 2 步,您可以通过在 Notepad++ 等编辑器中使用搜索/替换来节省大量时间。例如,在 layout.css 中,您可以使用正则表达式搜索 ^.*background:.+$
并替换为空。 (然后在最后删除所有空行。)
理论上,您应该能够将其减少到每个文件只有几个正则表达式,但 Notepad++ 似乎不喜欢管道字符或括号。 ^.*background(-color|-image)?:.+$
应该可以工作,但实际上没有。
这不是程序化的,但是当您编写自己的代码来执行您要求的操作时,您可能已经从头开始输入样式表了。
关于css - 以编程方式将样式表分离为子样式表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1720262/