SCSS：选择根类，然后选择父类并将规则应用于子类

Question

不幸的是，我没有找到更好的标题，但代码胜于雄辩。

我想要以下 CSS 输出：

.team-revolution-top-bar-marquee-is-active .team-revolution-top-bar-content {
    background-color: yellow;
}

这是缩小的 scss 代码：

.team-revolution-top-bar {
    &-marquee-is-active {
        white-space: nowrap;
        overflow: hidden;
    }

    &-content {
         flex-grow: 1;
         padding: 0.4rem;

        @at-root &-marquee-is-active {
             background-color: yellow;
        }
    }
}

我尝试了 & 和 @at-root，但没有任何效果。

这可以通过 SCSS 实现还是有替代方案？

Answer 1

那么可能是extended silent 课的时候了。

%teamRevolution-bgC {
  background-color: yellow;
}

.teamRevolution-topBar {
  &-marquee-isActive {
    white-space: nowrap;
    overflow: hidden;
    
    @extend %teamRevolution-bgC;
  }
  &-content {
    flex-grow: 1;
    padding: 0.4rem;
    
    @extend %teamRevolution-bgC;
  }
}

.teamRevolution-topBar-marquee-isActive, .teamRevolution-topBar-content {
  background-color: yellow;
}

.teamRevolution-topBar-marquee-isActive {
  white-space: nowrap;
  overflow: hidden;
}
.teamRevolution-topBar-content {
  flex-grow: 1;
  padding: 0.4rem;
}