css - 使用 Twitter Recess 编译有问题的 CSS 文件

Question

我正在使用 recess ( https://github.com/twitter/recess) 来压缩 CSS 文件

div {
    color: red
    border: 1px solid red
}

p {
    color: blue
}

# recess test.css --compress (No output)

如您所见，CSS 文件中缺少冒号，因此 recess 无法输出任何内容，但在实际浏览器中，如果只有部分 CSS 包含错误，则完全可以

例如 http://jsfiddle.net/VDQLU/ (见p中的蓝色，不受上述错误影响)

问。有什么办法可以在休息时压缩文件吗？还是使用其他工具？

Answer 1

休会失败的原因是因为那是无效的 css。 (你可能知道)。它在您使用的浏览器上仍然有效的原因是因为浏览器假定某些 Web 开发人员不会使用正确的语法并且他们还希望与旧网站兼容，不是因为分号在 css 上是可选的，或者因为 css解析器应该有一个怪癖模式!。

我会使用 sed 行来清理 css 文件，从现在开始，使用正确的 css 代码。这是一个示例 sed 行:(首先备份您的 css 文件!)

sed -i '/{/,/}/{/[}{]/!{/\/\*.*[^(\*\/\t )][\t ]*$/,/\*\//!{ s/\([^(\*\/);\t ]\)[\t ]*$/\1;/}}}' yourcssfile.css

此 sed 行将:

• 添加;，仅添加到没有分号结尾的行；也就是说，如果您确实有一些行以分号结尾，您将不会一个接一个地以两个分号结尾(如;;)
• 还要检查注释行，在一行中，例如:/* some comment */，或多行。

这并不意味着更改会自动完美地完成；您可能需要进行一些手动修复(可能需要手动修改 sed 行)，但如果您的 css 文件看起来像您的示例，它应该几乎可以完美运行。