less - 结合 mixins 覆盖 LESS 值

Question

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

.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;
}

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

1. 在 html 层中添加类会给你混合的结果或
2. 在 less 文件中使用 mixins，这样用户就不会被迫使用 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;
}

#content 现在有重复的背景规则，它不是我想要的黄色。

我肯定做错了什么，如果有人能描述我的逻辑问题在哪里，我将不胜感激。

Answer 1

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

您必须定义另一个 mixin 并在 red 和 green 类都存在或用于#content 时使用它：

.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
}