如何在 sass 中使用 :has

Question

如果 body 有一些带有 .rtl 类的元素，我需要添加一些样式。怎么可能做到呢？

body:has(.app.rtl) {
   .blah {
       some: blah;
   }
}

这是我需要的东西

Answer 1

使用 CSS 无法完成您想要的操作，因为 CSS 没有父选择器，目前也没有:has选择器。

SASS 也无法帮助你，因为 SASS 能为你做的就是让 CSS 的编写变得更容易——最终任何预处理器都会将你的代码编译为 CSS，这是浏览器唯一能理解的东西。这里唯一的跨浏览器解决方案（仍然）是 Javascript。

2023 年 1 月编辑：截至目前，Safari 和基于 Chrome/Chromium 的浏览器（Edge、Brave 等）支持:has()，并且 Firefox 在实验性 Web 平台功能标志后面提供了支持。

你的风格将如下所示：

body:has(.app.rtl) .blah {
    some: blah;
}