Sass 指定 parent

Question

我是 sass 的新手，正在寻找语法来指定与 child class 定义中的代码的层次关系。

目前我有：

.my-option
  color: #7E57EE

我希望我的 sass 编译为以下内容 CSS:

.my-option
  color: #7E57EE

.is-active .my-option
  background-color: #BADA55

我知道有两种方法可以做到这一点：

//More verbose than I'd like (and just plain css...)     
.my-option
  color: #7E57EE

.is-active .my-option
  background-color: #BADA55

//Too generic because...don't want the is-active definition to be cluttered
.my-option
  color: #7E57EE

.is-active
  .my-option
    background-color: #BADA55

Answer 1

您可以在上下文选择器的末尾使用 &，这会将您的 child class 放在那里：

.my-option
  color: #7E57EE

  .is-active &
    background-color: #BADA55

由于您正在编写 Sass，请务必缩进第二条规则，以便编译器正确解释它。

Sass 指定 parent

Sass specify parent

css

sass