SCSS＆符号运算符

Question

我正在从LESS迁移到SCSS。

我可以做到这一点：

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