less - 在 LESS 中覆盖 mixins

Question

在中多次定义 mixin 时LESS，然后按如下方式调用该 mixin

.background-color() {
    background: red;
}

.background-color() {
    background: yellow;
}

body {
    .background-color;
}

结果将是所有定义的 mixin 的组合输出

body {
  background: red;    // << output from mixin #1
  background: yellow; // << output from mixin #2
}

而当您在 Sass 和 Stylus 中应用相同的场景时（当然使用它们自己的语法），当您调用在样式表中多次定义的 mixin 时，只会执行最后定义的一个（它将覆盖所有之前定义的mixins ) 如下。

结果Sass和Stylus

body {
  background: yellow; // << output from mixin #2
}

如何覆盖 mixinLESS以便输出来自最后定义的 mixin？

score 1 · Accepted Answer

您不能覆盖它们，或者使用变量来定义“背景颜色”。对于较少的变量，最后声明的获胜。

在 Less 中，所有匹配的 mixin 都在源代码中编译。您可以使用命名空间来防止名称冲突，例如：

#ns1 {
.background-color() {
    background: red;
}
}

#ns2 {
.background-color() {
    background: yellow;
}
}

比你可以使用：

body {
    #ns2 > .background-color;
}

也不会删除双重属性以使某些浏览器黑客成为可能，例如：

#myElement {
    width: 300px;
    width: 500px\9;
}

要为您的用例找到解决方案，您应该重新表述您的问题并首先解释为什么您有这些相同命名的 mixin。

1 回答 1