SCSS & 运算符

Question

我正在从 LESS 迁移到 SCSS。

在 LESS 中我可以做到这一点：

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

CSS 结果：

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

SCSS 相当于什么？

Answer 1

试试这个：

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

CSS 输出：

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