Less 在较少的时间内覆盖mixin

在

LESS

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

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

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

body {
    .background-color;
}

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

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

---

如何在

LESS

中重写mixin以使输出来自上次定义的mixin？

您不能重写它们，或者使用变量定义“背景色”。对于较少的变量，最后声明的赢

也读

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

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

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

比您可以使用：

body {
    #ns2 > .background-color;
}

双重属性也不会被删除，以使某些浏览器攻击成为可能：

---

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

我从未少用过

，但为什么您要使用两个同名的mixin？在较少的情况下，当您再次使用相同的名称时，它只是连接规则。@Cristy用于多主题架构目的，其中基本主题将包含所有必要的变量和混合，并且在创建子主题时，您可以选择覆盖基本变量/混合项或仅继承基本变量。Less从CSS继承其语义，其中规则集不覆盖以前使用相同名称/选择器的规则集，而是级联。不过，如果这些“基本”混合是由您编写的，因此“可修改”，您可以使用它们来实现您想要的。但总的来说，是的，你必须为你的库使用不同的习惯用法/设计模式，因为Less与一些基本的东西有着根本不同的语言。尽管两次输出背景（红色后接黄色）以后的可读性不是很好，但我认为它在浏览器中应用时会表现正确，因为后一条规则将覆盖前一条规则。但目前我不确定这是否适用于较少的混合。但我想是的。这个话题也有答案。

body {
    #ns2 > .background-color;
}

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