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

Question

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

Answer 1

您可以使用 & 字符将 class 添加到 class 来实现此目的，如下所示：

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

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

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

How to add common style in less and based on dynamic class add different styles

html

css

less