Sass指定父级

Question

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

目前我有：

.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

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

.my-option
  color: #7E57EE

  .is-active &
    background-color: #BADA55

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