Magento 2:Less:extend()不添加mixin

时间:2016-06-28 20:55:28

标签: css magento less magento2

我遇到了一个问题,即我尝试使用扩展程序将.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成功的地方失败。

有人可以帮我理解这里发生了什么吗?

0 个答案:

没有答案