css - 如何使用:has in sass

Question

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

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

这是我需要的东西

Answer 1

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

SASS 也帮不了你，因为 SASS 能为你做的就是让编写 CSS 更容易——最终任何预处理器都会将你的代码编译成 CSS，这是浏览器唯一能理解的。 这里(仍然)唯一的跨浏览器解决方案是 Javascript。

编辑 2022 年夏季:截至目前，Safari supports :has(), and Chrome has support behind an experimental web platform features flag . Firefox 正在为此努力。

您的样式将如下所示:

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