用Stylus嵌套CSS类

Question

我试图用AngularJS做一些动画，在使用Stylus设置AngularJS动画CSS类时遇到了一个问题。我需要最终的CSS如下所示：

.test-animation-class.ng-hide-remove,
.test-animation-class.ng-hide-add.ng-hide-add-active {
    opacity 0
}

我试过以下的斯泰勒斯：

.test-animation-class
  &.ng-hide-remove
  &.ng-hide-add
    &.ng-hide-add-active
      opacity 0

但结果是这样的：

.test-animation-class.ng-hide-remove.ng-hide-add-active,
.test-animation-class.ng-hide-add.ng-hide-add-active {
    opacity 0
}

是否有一种方法可以指定.ng-hide-add-active类仅在直接父CSS类.ng-hide-add而不是.ng-hide-remove类上？

Answer 1

这个有用吗？

.test-animation-class
  &.ng-hide-remove
  &.ng-hide-add.ng-hide-add-active
    opacity 0

Answer 2

runTarm的回答似乎是最“触控”的方式，但如果您不想过度考虑它，这也是有效的：

.test-animation-class.ng-hide-remove
.test-animation-class.ng-hide-add.ng-hide-add-active
    opacity 0