SCSS/SASS中如何简洁实现容器hover时自身及子元素的联动样式

最优实现方案：结合CSS自定义属性（变量）实现 #

这种写法完全符合你期望的「统一声明默认态和hover态属性、无需重复嵌套子元素」的需求，所有子元素样式仅需定义一次，后续新增子元素也不用修改hover内的嵌套结构：

div.button-container {
  /* 统一声明默认状态的变量值 */
  --bg-color: white;
  --text-color: black;

  background-color: var(--bg-color);

  p {
    color: var(--text-color);
  }

  /* hover状态仅需要更新变量值，无需重复嵌套子元素选择器 */
  &:hover {
    --bg-color: red;
    --text-color: blue;
  }
}

方案优势：

• 维护成本极低：如果后续新增10个甚至更多子元素的hover态样式，只需要给对应属性绑定新变量，在hover伪类下加一行变量赋值即可，完全不用嵌套子元素选择器
• 状态统一管理：所有状态的属性值都集中在容器根级别定义，排查修改的时候不用翻找多层嵌套的代码
• 可扩展性强：如果后续需要加active、disabled等其他状态，只需要新增对应伪类/类名更改变量值即可，不需要修改子元素的样式逻辑

如果你的场景需要兼容不支持CSS变量的极端旧环境（比如IE11），可以用SCSS的@mixin封装状态映射来减少重复代码，但目前绝大多数业务场景下CSS变量方案就是最优解。

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