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?
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.
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.
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.