css - Merge lo 扩展来自不同 LESS 文件的 CSS 选择器(bootstrap)

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 优化器还是 LESS 中有什么我可以使用的？

Answer 1

手动方式

我找到了 an answer , Devilo.us .我试过你的代码，它输出你想要的。虽然这是一个外部工具。您必须手动完成。

---

咕噜方式

Zach Moazeni制作a tool处理这个。检查该页面的文档。

如果您使用的是 Grunt，您可以添加 grunt-csscss task这允许您在 grunt watch 运行时通过保存 LESS 将 LESS 编译为 CSS(无冗余)。我想这正是您要找的东西。