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

【问题标题】：Inline CSS from a valid CSS file (less or sass)来自有效 CSS 文件的内联 CSS（less 或 sass）
【发布时间】：2014-07-12 17:44:58
【问题描述】：

我通常使用 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？

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

【问题讨论】：

标签： css sass less

【解决方案1】：

使用 clean-css 代替，如果您根本没有使用 less。它可以自动关注@imports。只需在 source.css 中使用 @import url("another.css"); 并使用：

cleancss source.css > compressed.css

如果另一个.css 是：

h1 {
    color: #eee;
}

它输出：

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

【讨论】：