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