Css SASS-基于二级类更改背景

我有以下SASS课程：

.riskBlock {
  width: 5px;
  height: 10px;
  border-radius: 10px;
  margin-right: 3px;
  display: inline-block;
  .Critical {
    background-color: #7f2121;
  }
  .high {
    background-color: #ff0000;
  }
  .medium {
    background-color: #ff9900;
  }
}

我的目标是拥有如下HTML标记： 并显示基于辅助类的背景，

critical

。当前-仅显示我在主类（aka

riskBlock

）中设置的背景

---

知道我遗漏了什么吗？

SASS中的嵌套选择器在CSS中创建，类似于

.riskblock.Critical

。您需要的是选择同时具有这两个类的元素。您可以在SASS中使用以下命令执行此操作：

这将产生以下结果：

.riskBlock.Critical{
背景色：#7f2121；
}
.高{
背景色：#ff0000；
}
.中等{
背景色：#ff9900；
}

.riskBlock {
  /** ... */
  &.Critical {
    background-color: #7f2121;
  }
  &.high {
    background-color: #ff0000;
  }
  &.medium {
    background-color: #ff9900;
  }
}