Css 如何使用SASS将类添加到嵌套子级的父级？

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

所需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;
       }
   } 
}

---

你要找的是

.addon {
  .checkbox {...}

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

遗憾的是，没有比这更简短的选择器了。

同样相关：