链式嵌套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()选择器只执行简单的匹配。上面的语法对于4级选择器是有效的，这是在工作草案中，并且在任何浏览器中都是不可用的。

另外，

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

不是，

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

其中第一个方法充当AND，第二个方法充当OR。

• MDN文档
• W3C文档