少css：不是伪选择器问题

Question

我在编译较少的CSS时遇到了一个小问题：

.root {
   .element {
     background: red;

     &-checked:not(&-disabled) {
       color: red;
     }
   }
}

编译成

.root .element {
  background: red;
}
.root .element-checked:not(.root .element-disabled) { <--- THE PROBLEM IS HERE
  color: red;
}

但是我需要它看起来像这样：

.root .element-checked:not(.element-disabled) <--- WITHOUT ROOT IN ':NOT' PSEUDO SELECTOR

有没有办法告诉编译器不要继承父选择器？

谢谢！

Answer 1

您可以简单地写：

@element-disabled: '.element-disabled';
.root {
   .element {
     background: red;

     &-checked:not(@{element-disabled}) {
       color: red;
     }
   }
}