如何使用 SASS 将类添加到嵌套子级的父级？ [复制]

Question

这是一个基本示例，但我想在嵌套子级中向父级添加一个类。

所需的 CSS：

.addon .checkbox { background: blue; }
.addon.active .checkbox { background: red; }

使用 SASS

 .addon {
       .checkbox { 
         background: blue; 
         .active & { background: red }
         .addon.active & { background: red }
       }
 }

这给了我以下信息：

.addon .checkbox {
  background: blue;
}
.active .addon .checkbox {
  background: red;
}
.addon.active .addon .checkbox {
  background: red;
}

如您所见，我无法使用 & 符号获得所需的结果。 我可以使用嵌套做我想做的事情吗，还是必须使用普通的 css 方式写出来。

回答：

.addon {
    .checkbox { 
       background: blue; 
       @at-root #{selector-replace(&, '.addon', '.addon.active')} {
          background: red;
       }
   } 
}

Answer 1

你要找的是

.addon {
  .checkbox {...}

  &.active {
    .checkbox {...}
  }
}

遗憾的是，没有更短的形式来编写这样的选择器。