Html 如何在less中添加常用样式并基于动态类添加不同样式

下面是HTML签名，其中我有一个公共类，我想对这两个div元素应用相同的color属性。但是基于动态添加的background类，我想给它添加背景色。虽然给定的LESS样式是有效的，但我试图重构不起作用的代码

HTML:
<div class="common background-red"></div>
<div class="common background-warning"></div>

LESS: (which is working, please suggest if it can be refactored)
.background-red {
   color: blue;
   background-color: red;
}

.background-warning {
   color: blue;
   background-color: yellow;
}

---

您可以使用符号和字符将类添加到类中，如下所示：

.common {
  color: blue
  &.background-red {
    background-color: red;
  }
  &.background-warning {
    background-color: yellow;
  }
}

有关这方面的其他信息，请参见此处：

.common {
  color: blue
  &.background-red {
    background-color: red;
  }
  &.background-warning {
    background-color: yellow;
  }
}