Nested CSS Classes with Stylus

Question

I am trying to do some animations with AngularJS and ran into an issue when trying to use Stylus to set the AngularJS animation CSS classes. I need the final CSS to look like this:

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

I tried the following Stylus:

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

But that comes out looking like this:

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

Is there a way to specify the .ng-hide-add-active class to be only on the immediate parent CSS class, .ng-hide-add, and not the .ng-hide-remove class?

Answer 1

Is this works?

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