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

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

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.

Answer 2

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;