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

Question

我正在使用凹进（https://github.com/twitter/recess）来压缩CSS文件

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

p {
    color: blue
}

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

正如你所看到的，CSS文件中缺少冒号，因此凹陷无法输出任何内容，但在真正的浏览器中，如果只有部分CSS包含错误，那么它是完全可以的

e.g。 http://jsfiddle.net/VDQLU/（参见p中的颜色，不受上述错误的影响）

Q值。有没有办法压缩文件无论如何与凹陷？还是使用其他工具？

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文件看起来像你的例子，它应该可以工作得非常完美。

Answer 2

任何类型的CSS压缩都会从CSS中删除换行符。

虽然浏览器现在可以理解你的代码，没有换行符来帮助它处理错误的代码，但它只有一个字符串。

任何压缩该代码的压缩器都不会对你有任何好处，因为一旦删除了换行符，几乎肯定不会被任何浏览器理解。

Answer 3

请使用这样的div风格。 div {color：red; border：solid red;}

这是一个很好的解决方案。