[英]Merge lo extend CSS selectors from different LESS files (bootstrap)
In base.less
: 在base.less
:
html{font-size:16px}
body{color:green}
In theme.less
: 在theme.less
:
html{color:red}
In main.less
: 在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: 我在theme.less
尝试了一下, theme.less
没有成功:
html:extend(html) { color:red }
Do I need to use a CSS optimizer or is there something in LESS I can use? 我是否需要使用CSS优化器,或者可以在LESS中使用某些功能?
I found an answer , Devilo.us . 我找到了答案 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. Zach Moazeni制作了一个可以处理此问题的工具 。 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. 如果您使用的是Grunt,则可以添加grunt-csscss任务 ,该任务仅通过在运行grunt watch
时保存LESS即可将LESS编译为CSS(无冗余)。 I guess this is definitively what you're looking for. 我想这绝对是您要寻找的。
It is possible to force "consolidated" selector styles via mixins: 可以通过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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.