css - 来自有效 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(对开发有用)，但 compressed.css 将被优化为内联 CSS？

注意:我不使用 less 的功能，所以如果 SASS 可以提供相同的功能，我愿意倾听。

Answer 1

使用clean-css相反，如果您根本不使用 less 。它可以自动跟随 @import。只需在 source.css 中使用 @import url("another.css"); 并使用:

cleancss source.css > compressed.css

如果 another.css 是:

h1 {
    color: #eee;
}

输出:

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