如何在SASS中定位多父选择器的子元素

Question

我希望根据父项不同地定位.overlay元素，我在下面的例子中有一个双顶级选择器，所以我的问题是如何在不需要.homeHero和.categoryHero的树。

这可能是直截了当的，但我检查了所有SASS文档，并且没有在任何地方提到或者我已经看到了。

<div class="homeHero">
    <div class="overlay">
       TEXT HERE
    </div>
</div>

SASS代码

.homeHero, .categoryHero {
    .overlay {
        height: 400px;
    }
}

我需要的CSS输出

.homeHero .overlay {height:400px}
.categoryHero .overlay {height:200px;}

提前致谢

杰米

Answer 1

如果你真的想这样做，你可以尝试这样的事情：

.overlay {
  height: 400px;
  .categoryHero & {
    height: 200px;
  }
}

尾随和号将在此处选择.overlay的父级，在此示例中为categoryHero。如果categoryHero不是父级，则.overlay的高度仍为400px。话虽这么说，如果你有超过两个可能的父母进行叠加，那么我看不到你的sass中有多棵树的方法。

Answer 2

我认为，最好的方法是：

.homeHero {
    .overlay {
        height: 400px;
    }
}

.categoryHero {
    .overlay {
        height: 200px;
    }
}