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

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

在html图层中添加类，可以为您提供混合结果或
在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并在红色和绿色类都存在时使用它或者#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
}

与mixin一起覆盖LESS值

1 个答案: