Sass如何实现子元素hover时为父元素设置样式

你之前尝试的两种写法本质都是Sass编译阶段的选择器拼接技巧，只能实现正向的从父到子的选择，没法做到根据子元素状态反向选中父元素，所以达不到预期效果。目前所有现代浏览器都原生支持:has()伪类，用它写是最简洁、不需要改DOM结构的方案。

可直接复用的Sass代码 #

.main-header {
  // 这里写导航栏默认样式
  // 匹配：子元素.navbar-links处于hover状态 / 子元素.navbar-title处于hover状态时，给当前父级加样式
  &:has(.navbar-links:hover),
  &:has(.navbar-title:hover) {
    background: red;
  }

  // 原有子元素的样式照常嵌套写即可
  .navbar-title {
    // 你的标题样式
  }
  .navbar-links {
    // 你的导航链接样式
  }
}

编译后生成的CSS完全匹配你要的效果，不需要修改现有JSX结构：

.main-header:has(.navbar-links:hover),
.main-header:has(.navbar-title:hover) {
  background: red;
}

之前两种写法失效的原因 #

• 用$h: &存储父选择器的写法：&只是当前嵌套层级选择器的字符串引用，在子选择器块里调用这个变量，最终拼出来的选择器是类似.main-header .navbar-links:hover .main-header的错误结构，根本选不到目标父元素
• 用@at-root的写法：作用只是跳出当前嵌套层级，从文档根路径开始写选择器，本质还是正向匹配元素，没有反向选父级的能力，自然实现不了需求

注意：如果需要兼容Chrome 105、Safari 15.4以下的老旧浏览器，可以加少量JS做兜底：监听.navbar-links、.navbar-title的mouseenter和mouseleave事件，hover时给.main-header加个比如header-hover的类，离开时移除这个类，把红背景样式写在这个类下即可。目前绝大多数线上场景不需要做这层兼容，:has()的全球支持率已经超过95%。

适配的页面结构参考 #

你现有的DOM结构不需要做任何修改，可直接适配上面的样式代码：

<nav className='main-header'>
    <div className='navbar-title'>
        <a href='/blog/home'>
            <h2 className='navbar-title-text'>REVIEWS</h2>
        </a>
    </div>
    <ul className='navbar-links'>
        <li className='navbar-item'>
            <a href='/blog/home'>
                <FaHome className='navbar-icon' />
            </a>
        </li>
        <li className='navbar-item'>
            <a href='/blog/television'>
                <FaTv className='navbar-icon' />
                <div className='navbar-text'>TELEVISION</div>    
            </a> 
        </li>
    </ul>
</nav>

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