使用 Stylus 嵌套 CSS 类答案

【问题标题】：Nested CSS Classes with Stylus使用 Stylus 嵌套 CSS 类
【发布时间】：2014-07-22 18:27:36
【问题描述】：

我正在尝试使用 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 类上？

【问题讨论】：

【解决方案1】：

这行得通吗？

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

【讨论】：

我认为可能有另一种方法可以在不组合这两个类的情况下生成它，但似乎没有办法引用直接父级。 github.com/LearnBoost/stylus/issues/802
是的，我目前正在这样做。我只是想知道是否有直接父选择器。感谢您提供功能请求链接。

【解决方案2】：

runTarm 的回答似乎是最“手写笔”的方式，但如果你不想多想，这也行：

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

【讨论】：