如何在SASS中实现仅当父元素含customHeight类时应用等高样式？

首先，咱们先理清你的需求：你希望只有当某个祖先容器带有.customHeight类时，它内部的.vc_column-inner、.wpb_wrapper、.textCard元素才会应用height: 100%的样式，以此实现卡片等高效果。

你之前尝试的SASS写法其实思路是对的，但可能你误解了它编译后的效果。咱们一步步拆解：

问题分析 #

你最初写的这段SASS：

.customHeight{
  .vc_column-inner, .wpb_wrapper, .textCard{ height: 100%; }
}

编译后的CSS是：

.customHeight .vc_column-inner,
.customHeight .wpb_wrapper,
.customHeight .textCard {
  height: 100%;
}

这正是你需要的后代选择器——它会选中所有.customHeight容器内部（不管嵌套层级）的这三类元素，完美匹配你提供的HTML结构：

• 最外层.customHeight下的.vc_column-inner、.wpb_wrapper
• 嵌套在.columnA/.columnB里的.vc_column-inner、.wpb_wrapper、.textCard

而你尝试的直接子选择器（>）只会选中.customHeight的直接子元素，无法覆盖内层嵌套的目标元素；类叠加选择器（.customHeight.vc_column-inner）更是错误的，它表示同时拥有这两个类的元素，完全不符合你的DOM结构。另外注意你的HTML里有个拼写错误：cutsomHeight应该改成customHeight，否则样式根本不会触发。

正确的SASS写法 #

你最初的SASS写法就是正确的，为了可读性，建议把选择器换行分开写：

.customHeight {
  .vc_column-inner,
  .wpb_wrapper,
  .textCard {
    height: 100%;
  }
}

如果担心嵌套层级导致的样式优先级问题，也可以写得更明确（不过通常没必要）：

.customHeight {
  .vc_column-inner,
  .vc_column-inner .wpb_wrapper,
  .vc_column-inner .wpb_wrapper .textCard {
    height: 100%;
  }
}

内容的提问来源于stack exchange，提问作者Freddy