css - SASS - 根据中学班级更改背景

Question

我有以下 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. 目前 - 仅显示我在主类（又名riskBlock）中设置的背景。

知道我错过了什么吗？

标签： csssass

Answer 1

SASS 中的嵌套选择器在 CSS中创建祖先选择器.riskblock .Critical，例如. 您想要的是选择具有这两个类的元素。您可以使用父选择器在 SASS 中执行此操作：

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

这会产生以下结果：

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