Search code examples
csstwitter-bootstraplessextend

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

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?

Solution

  • 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;