CSS 有没有合并CSS的工具?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are there any tools for merging CSS?
提问by M. Dave Auayan
I have a couple CSS files with overlapping CSS selectors that I'd like to programmatically merge (as in not just appending one file to the end of the other). Is there any tool to do this online? or a Firefox extension perhaps?
我有几个带有重叠 CSS 选择器的 CSS 文件,我想以编程方式合并它们(不仅仅是将一个文件附加到另一个文件的末尾)。是否有任何工具可以在线执行此操作?或者 Firefox 扩展?
回答by M. Dave Auayan
I found Factor CSS- complete with source code, but I think it does way more than I'd need. I really just want to combine CSS blocks that have the same selectors. I'll check out the source code and see if it can be converted to something usable as a TextMate bundle. That is, unless someone else manages to get to it before me.
我找到了Factor CSS- 完整的源代码,但我认为它比我需要的要多得多。我真的只想组合具有相同选择器的 CSS 块。我将查看源代码,看看它是否可以转换为可用作 TextMate 包的东西。也就是说,除非其他人设法在我之前完成它。
EDIT: Even better - here's a list of web-based tools for checking/formatting/optimizing css.
编辑:更好 - 这是用于检查/格式化/优化 css 的基于网络的工具列表。
回答by Ben23
I wrote a Perl utility to do this several years ago.
几年前,我编写了一个 Perl 实用程序来执行此操作。
As well as merging one or more stylesheets into a single coherent sorted output (complete with comments to show which file(s) each property appeared in, and warnings when a property has conflicting values), you can also selectivelysearch or merge based on the selector, the property or both.
以及合并一个或多个样式表成一个单一的连贯有序输出(完整的意见,看看哪个文件(S)出现在每个属性和警告,当酒店有冲突的值),你也可以选择搜索或基于合并选择器、属性或两者。
These are handled intelligently so that, for example, if you search for the property font
you also get font-size
, font-weight
etc (still presented inside CSS blocks with the relevant selectors that they were taken from). Likewise, selector searching tries to Do The Right (ie generally most useful) Thing. If you search for, say, the element a
, it will match any block whose selector is a
, a:hover
, a.extlink
, a#mylink
, .foo a
, #bar a
, p a
, pre > a
, a + p
, a img
... (the last two don't directlyaffect the styling of the a
itself but of an adjacent or descendent element, which it is often useful to know about in such a search), without matching #a
, .a
, etc. Of course this behaviour is optional, you can also search for an exact selector. Or a regex.
这些被处理的智能化,这样,例如,如果你搜索的属性font
,你还可以得到font-size
,font-weight
等(仍然呈现CSS块内部有关选择,他们取自)。同样,选择器搜索尝试做正确的(即通常最有用的)事情。例如,如果您搜索元素a
,它将匹配任何选择器为a
, a:hover
, a.extlink
, a#mylink
, .foo a
, #bar a
, p a
, pre > a
, a + p
, a img
... (最后两个不直接影响其a
本身的样式,而是相邻或后代的样式)元素,在这样的搜索中了解它通常很有用),无需匹配#a
,.a
等。当然这个行为是可选的,你也可以搜索一个精确的选择器。或者一个正则表达式。
Apart from perl itself the only dependency is CSS::Tiny
除了 perl 本身,唯一的依赖是CSS::Tiny
It's free software, and you can get it here: cssmerge
它是免费软件,你可以在这里得到它:cssmerge
回答by Nick Berardi
No I wish there was but the programming effort seems too much since there are multiple ways to reference a single element. The best that you can do is use a runtime like FireBug to find duplicates.
不,我希望有,但编程工作似乎太多了,因为有多种方法可以引用单个元素。您能做的最好的事情是使用像 FireBug 这样的运行时来查找重复项。