Merge lo extend CSS selectors from different LESS files (bootstrap)

Question

In base.less:

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

In theme.less:

html{color:red}

In main.less:

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

When compiled it outputs:

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

How can I output this?

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

I tried this in theme.less without success:

html:extend(html) { color:red }

Do I need to use a CSS optimizer or is there something in LESS I can use?

Answer 1

It is possible to force "consolidated" selector styles via mixins:

html    {.html()}

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

body    {color: green}

.html() {color: red}

.html() {background-color: blue}

// etc.

Though usually this kind of theming is achieved via variables:

// base.less

@text-color: blue;

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

// theme.less:

@text-color: yellow;

Answer 2

Manual Way

I found an answer, Devilo.us. I tried your code and it outputs what you want. This is an external tool though. You've to do it manually.

---

Grunt Way

Zach Moazeni made a tool that handles this. Check that page for docs.

If you're using Grunt, you can add the grunt-csscss task which allows you to compile LESS to CSS (without redundancy) just by saving your LESS when grunt watch is running. I guess this is definitively what you're looking for.