少覆盖类和子

Question

我对rect:active和rect.myClass的语句较少。我希望rect.myClass:active与rect.myClass相同。我怎么能这么容易地做到这一点？

例如：

rect:active { opacity : 1 }
rect.myClass { opacity : .5 }

现在rect.myClass:active也应该有opacity : .5，除了它的内容不仅仅是一个内线

Answer 1

如果没有类:active，请不要将myClass个样式应用于元素。

少代码

rect {
  &:not(.myClass) {
    &:active {
      opacity: 1;
    }
  }

  &.myClass {
    opacity: .5;
  }
}

编译成css

rect:not(.myClass):active {
  opacity: 1;
}
rect.myClass {
  opacity: 0.5;
}