合并来自不同LESS文件的CSS选择器（引导程序）

Question

在base.less：

html{font-size:16px}
body{color:green}

在theme.less：

html{color:red}

在main.less：

@import "base.less"
@import "theme.less"

编译时输出：

html{font-size:16px}
body{color:green}
html{color:red}

我该如何输出？

html{font-size:16px;color:red;}
body{color:green}

我在theme.less尝试了此操作但没有成功：

html:extend(html) { color:red }

我是否需要使用CSS优化器，或者我可以使用哪些东西？

Answer 1

手动方式

我找到了an answer，Devilo.us。我尝试了你的代码，它输出你想要的。这是一个外部工具。你可以手动完成。

---

Grunt Way

Zach Moazeni让a tool处理此问题。检查该文档的页面。

如果你正在使用Grunt，你可以添加grunt-csscss task，只需在grunt watch运行时保存你的LESS，就可以编译LESS到CSS（没有冗余）。我想这绝对是你正在寻找的东西。

Answer 2

可以强制＆＃34;合并＆＃34;选择器样式通过mixins：

html    {.html()}

.html() {font-size: 16px}

body    {color: green}

.html() {color: red}

.html() {background-color: blue}

// etc.

虽然通常这种主题是通过变量实现的：

// base.less

@text-color: blue;

html {
    font-size: 16px;
    color:     @text-color;
}

// theme.less:

@text-color: yellow;