链式嵌套 SCSS 参数答案

【问题标题】：Chain nested SCSS argements链式嵌套 SCSS 参数
【发布时间】：2018-02-22 16:13:49
【问题描述】：

有什么办法可以转换这个：

[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;
}

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

【问题讨论】：

【解决方案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。

【讨论】：

这很好，但我当前的代码是基于一个模板，每次出现更新时我都需要更新。我不想每次都改成代码。我的目标是检测可以处理此问题的编译器或编译器选项。
谢谢你，你是对的。 :not() 使用 :matches() 等于 OR 匹配列表。 Qrazy 是，当我的编译器编译仅适用于 Safari 的 OR 语法时，gulp 文件生成了链接方法 (:not(...):not(...))。所以我必须联系模板团队的支持来看看这个。