来自有效CSS文件的内联CSS（less或sass）

Question

我通常使用 lessc 来缩小CSS，例如

lessc -x source.css > compressed.css

source.css包含

@import url("another.css"); // Valid CSS
p {
   /* Some random CSS */
   color:red;
}

哪个给我

@import url("another.css");p{color:#f00}

我想将 another.css 作为compressed.css中的内联标记，我知道的唯一方法是使用..

@import (inline) "another.css"; // Not valid CSS

但是，此行不是有效的CSS，因此当我直接包含 source.css 时，它将被破坏。

有没有像source.css这样的方法保持有效的CSS（对于开发很有用），但是compress.css会被优化为内联CSS吗？

注意：我不会少用＆＃39;功能，所以如果SASS可以提供​​相同的功能，我愿意听。

Answer 1

如果您根本不使用较少，请使用clean-css。它可以自动关注@import。只需在source.css中使用@import url("another.css");并使用：

cleancss source.css > compressed.css

如果another.css是：

h1 {
    color: #eee;
}

输出：

h1{color:#eee}p{color:red}