如何少添加常见样式，并基于动态类添加不同样式

问题描述

下面是HTML签名，其中有一个公共类，并且我想将相同的color属性应用于两个div元素。但是基于动态添加的背景类，我想为其添加背景颜色。尽管给定的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;
  }
}

有关此方面的其他信息，请参见： https://css-tricks.com/the-sass-ampersand/

html less