Sass指定父项[重复]

Question

这个问题已经在这里有了答案：

• Sass .scss：嵌套和多个类？ 2个答案

我是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，因此请确保缩进第二条规则，以便编译器正确解释它。