在LESS中压倒mixins

时间:2014-11-23 12:22:00

标签: less less-mixins

LESS中多次定义mixin,然后按如下方式调用mixin

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

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

body {
    .background-color;
}

结果将是来自所有已定义的mixins的组合输出

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

当你在Sass&amp;中应用相同的场景时手写笔(当然使用他们自己的语法),当您调用在样式表中多次定义的mixin时,将执行最后定义的一个(它将覆盖所有先前定义的mixin),如下所示

结果SassStylus

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

如何覆盖LESS中的mixin,以便输出来自最后定义的mixin?

1 个答案:

答案 0 :(得分:1)

您不能覆盖它们,或者使用变量来定义背景颜色&#39;。对于较少变量,最后声明的胜利。

另请阅读Pattern-matching

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

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

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

比你可以使用:

body {
    #ns2 > .background-color;
}

也不会删除双重属性以使某些浏览器无法进行,example

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

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