合並從不同的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嘗試了一下， theme.less沒有成功：

html:extend(html) { color:red }

我是否需要使用CSS優化器，或者可以在LESS中使用某些功能？

Answer 1

手動方式

我找到了答案 Devilo.us 。 我嘗試了您的代碼，它輸出了您想要的。 但是，這是一個外部工具。 您必須手動進行。

---

咕Way聲

Zach Moazeni制作了一個可以處理此問題的工具 。 檢查該頁面的文檔。

如果您使用的是Grunt，則可以添加grunt-csscss任務 ，該任務僅通過在運行grunt watch時保存LESS即可將LESS編譯為CSS（無冗余）。 我想這絕對是您要尋找的。

Answer 2

可以通過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;