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

时间:2016-03-20 19:00:32

标签: css sass

我希望根据父项不同地定位.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;}

提前致谢

杰米

2 个答案:

答案 0 :(得分:0)

如果你真的想这样做,你可以尝试这样的事情:

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

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

答案 1 :(得分:-1)

我认为,最好的方法是:

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

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