Sass响应式导航：指定屏宽下汉堡菜单切换效果失效排查

核心问题原因 #

• 选择器权重不足：基础样式全部嵌套在.header__content .nav层级下，Sass编译后生成的选择器优先级为0-3-0，而媒体查询中直接写.nav、.btn-mobile-nav这类优先级为0-1-0的选择器，设置的显示/隐藏规则完全无法覆盖默认样式，导致断点触发后样式不生效。
• Logo样式冲突：Logo元素同时带有nav__logo和nav__items两个类名，媒体查询中先写Logo显示规则、后写导航项隐藏规则，同权重下后写的规则覆盖前者，会导致Logo一并被隐藏。
• 细节遗漏：汉堡菜单的关闭按钮默认没有设置隐藏，会和打开按钮同时展示。

修复方案 #

调整880px断点下的媒体查询代码，对齐选择器权重，修正规则顺序：

@media screen and (max-width: $bp-medium2) {
  html {
    font-size: 60%;
  }

  // 和基础样式保持一致的嵌套层级，保证选择器权重足够覆盖默认样式
  .header__content .nav {
    // 隐藏除Logo外的所有常规导航项、右侧登录注册区
    .nav__left .nav__list .nav__items:not(.nav__logo),
    .nav__right {
      display: none;
    }

    // 单独保留Logo显示
    .nav__logo {
      display: block;
    }

    // 显示汉堡菜单
    .btn-mobile-nav {
      z-index: 9999;
      display: block;

      // 默认隐藏关闭按钮，后续可通过JS切换类名控制开/关图标显隐
      .btn__close {
        display: none;
      }
    }
  }
}

替换原有对应断点的媒体查询代码后，≤880px时常规导航隐藏、汉堡菜单显示的效果即可正常生效。后续如果要实现点击汉堡按钮弹出移动端导航的交互，只需要给.nav添加状态类（比如.nav--mobile-open），在状态类下写移动端侧边导航的样式即可，不需要改动现有HTML结构。

内容的提问来源于stack exchange，提问作者David.E