我遇到了一个问题,即我尝试使用扩展程序将.lib-clearfix()
应用于某个类。问题是扩展本身确实有效,但扩展不适用于mixin。相关文件和css如下:
{主题路径} /网络/ CSS /源/的 _sources.less
@import '_variables.less';
@import (reference) '_extends.less';
@import '_typography.less';
@import '_layout.less';
{主题路径} /网络/ CSS /源/的 _extends.less
@abs-add-clearfix: {
.lib-clearfix();
};
.abs-add-clearfix {
@abs-add-clearfix();
}
LIB /网络/ CSS /源极/ LIB /的 _utilities.less
.lib-clearfix() {
&:before,
&:after {
content: '';
display: table;
}
&:after {
clear: both;
}
}
{主题路径} / {模块} /网络/ CSS /源/的 _module.css
& when (@media-common = true) {
.header.panel:extend(.abs-add-clearfix) {
...
}
}
.header.panel
,因为所写的不会呈现.lib-clearfix()
样式。但是,如果在_module.less
中我将header.panel
更改为 -
.header.panel {
.lib-clearfix();
}
- 它按预期工作;应用了clearfix样式。为了测试扩展是否被解析,我将@abs-add-clearfix
更改为并恢复了.header.panel
css。
LESS
@abs-add-clearfix: {
color: blue;
};
.abs-add-clearfix {
@abs-add-clearfix();
}
.header.panel:extend(.abs-add-clearfix) {
...
}
输出
.header.panel {
color: blue;
}
所以,我无法理解为什么通过扩展调用.lib-clearfix()
失败,尽管该扩展中的其他css正确应用,以及为什么在.lib-clearfix()
选择器中调用.header.panel
成功的地方失败。
有人可以帮我理解这里发生了什么吗?