css - 链接嵌套的 SCSS 参数

Question

有什么办法可以把这个转换成:

[class*="needle"]:not([class*="__front"], [class*="__back"]) {
  position: absolute;
}

为此:

[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
  position: absolute; }

使用 SCSS 编译器？

我只得到:

[class*="needle"]:not([class*="__front"], [class*="__back"]) {
  position: absolute;
}

大多数浏览器无法解释。非常感谢。

Answer 1

出于开发 SCSS 的原因，我会使用它，以使语法漂亮且易于理解。

[class*="needle"]{
    &:not([class*="__front"]){
        &:not([class*="__back"]) {
              position: absolute;
        }
    }
}

应该可以。此处，& 用于引用父级。编译后，生成的 CSS 将是

[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
  position: absolute; 
}

---

对不起，我看错了问题。上述转换在 SCSS 中是不可能的，因为这既不是正确的 CSS 语法，也不是 SCSS 语法。

目前，:not() 选择器只做简单的匹配。上面的语法对于 level 4 选择器是有效的，它处于工作草案中并且在任何浏览器中大多不可用。

---

此外，

<Selector>:not(<Condition1>):not(<Condition2>) {
  position: absolute; 
}

不是，

<Selector>:not(<Condition1>,<Condition2>) {
  position: absolute; 
}

第一个方法作为AND，第二个方法作为OR。

• > MDN Docs
• > W3C Docs