如何在SASS嵌套导入中排除特定规则的父选择器注入？

要让特定规则不受外层#rootNode选择器的注入影响，可以使用SASS的@at-root指令——它能让内部规则跳出当前嵌套上下文，生成独立于外层选择器的CSS规则，以下是两种可行方案：

方案1：生成精准匹配DOM的选择器 #

修改accordion.scss中的目标规则如下：

.some-rules {
  .my-selector {
    @at-root #rootNode.is-special & {
      background-color: red;
    }
  }
}

编译后会得到完全匹配DOM结构的CSS：

#rootNode.is-special .some-rules .my-selector {
  background-color: red;
}

该选择器直接对应id="rootNode"且带有.is-special类的父元素下的.my-selector，完美适配你的DOM层级。

方案2：跳出嵌套后使用通用相对选择器 #

如果不想硬写#rootNode，可以用@at-root跳出外层嵌套，结合父选择器&实现通用的祖先匹配：

.some-rules {
  .my-selector {
    @at-root .is-special & {
      background-color: red;
    }
  }
}

编译后得到：

.is-special .some-rules .my-selector {
  background-color: red;
}

这个选择器会匹配所有带有.is-special类的祖先元素下的.my-selector，同样满足需求且不会带上#rootNode前缀。

内容的提问来源于stack exchange，提问作者antun