SCSS 修改父选择器

Question

有没有办法将 class 添加到带有 .scss 的嵌套选择器的第一个元素？ 想象下面的例子：

body p {
  color: black;
}

body.other-mode p {
  color: red;
}

是否可以这样表达（或类似的方式，因为这不会编译）

body p {
  & {
    color: black;
  }
  .other-mode& {
    color: red;
  }
}

我知道可以这样写，但这只是“解决”问题示例的不同方式。

body {
  & p {
    color: black;
  }
  
  &.other-mode p {
    color: red;
  }
}

我也尝试过使用一些 scss 选择器，但它们并没有像预期的那样工作，在下面的情况下，选择器最终是 body p body.other-mode p 而不是 body p

body p {
  & {
    color: black;
  }
  #{selector-replace(&, "body", "body.other-mode")} {
    color: red;
  }
}

Answer 1

要使上一个解决方案有效，您可以使用 @at-root。

body p {
  & {
    color: black;
  }
  @at-root #{selector-replace(&, "body", "body.other-mode")} {
    color: red;
  }
}

编译为

body p {
  color: black;
}
body.other-mode p {
  color: red;
}

---

但就我个人而言，我发现您的原始解决方案最具可读性。
body { &.other-mode p {color: red;} }
我发现拆分 body 和 p 在 SCSS 中更方便。