结合mixin重写LESS值

我有一个非常基本的less代码：

.make-red {
    background: red;
    width: 50px;
}

.make-green {
    background: green;
    height: 50px;
}


.make-red.make-green {
    background: yellow;
    border: 5px solid black;
    padding: 20px;
}


#content {
    .make-red;
    .make-green;
}

我希望它可以通过两种方式访问和执行

在html层中添加类将产生混合的结果或结果

在less文件中使用mixin，这样用户就不会被迫使用html层中的类

正如你们所看到的，我有两个类，一个使背景为红色，另一个使背景为绿色，但当它们一起使用时，我想应用一些更改

编译这段特定代码后，结果不会很好：

.make-red {
  background: red;
  width: 50px;
}
.make-green {
  background: green;
  height: 50px;
}
.make-red.make-green {
  background: yellow;
  border: 5px solid black;
  padding: 20px;
}
#content {
  background: red;
  width: 50px;
  background: green;
  height: 50px;
}

#内容现在已经复制了背景规则，它不是我想要的黄色

我肯定弄错了什么，如果有人能告诉我逻辑问题在哪里，我将不胜感激。

在#内容中，您同时应用了绿色和红色，因此您在CSS输出中定义了两倍的背景和宽度

您必须定义另一个mixin，并在同时存在红色和绿色类时使用它，或者为#内容使用它：

在#内容中，您同时应用了绿色和红色，因此在CSS输出中定义了两倍的背景和宽度

您必须定义另一个mixin，并在同时存在红色和绿色类时使用它，或者为#内容使用它：

.make-red {
    background: red;
    width: 50px;
}

.make-green {
    background: green;
    height: 50px;
}

.make-yellow {
    background: yellow;
    border: 5px solid black;
    padding: 20px;
}

.make-red.make-green {
    .make-yellow;
}

#content {
    .make-yellow
}