Sass指定父级[重复]

Posted 2023-03-06

【中文标题】Sass指定父级[重复]

【英文标题】：Sass specify parent [duplicate]

【发布时间】：2015-03-21 15:45:28

【问题描述】：

我是 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

【参考方案1】：

您可以在上下文选择器的末尾使用&，它将为您放置您的子类：

.my-option
  color: #7E57EE

  .is-active &
    background-color: #BADA55

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