Sass 符号与运算符

我正在从LESS迁移到SCSS

在更少的时间里，我可以做到这一点：

.btn {
  a&.disabled,
  fieldset[disabled] a& {
    pointer-events: none;
  }
}

CSS结果：

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

什么是SCSS的等价物？

试试这个：

SCSS:

.btn {
  //  move content out of `.btn` nesting 
  @at-root {
    //  use interpolation to `glue` a and & together 
    a#{&}.disabled,
    fieldset[disabled] a#{&} {
        pointer-events: none;
    }
  }
}

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

CSS输出：

.btn {
  //  move content out of `.btn` nesting 
  @at-root {
    //  use interpolation to `glue` a and & together 
    a#{&}.disabled,
    fieldset[disabled] a#{&} {
        pointer-events: none;
    }
  }
}

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

---

我试过了。它编译为

a&.disabled

和

fieldset[disabled]a&

，这是错误的。根据我共享的链接，SCSS等价物与生成的CSS相同，因此不等同于SASS。原因是，这个符号应该是关于嵌套的（维护父/子节点的结构）。当您任意连接这样的选择器时，我可以向您保证，在大型项目中，您将很快失去对代码的概述。如果您需要预先添加一个

a

，只是为了使选择器更具体，这已经提示了css结构中的问题。