为什么SCSS中定义的类名编译为CSS后出现重复，导致导航栏样式异常？

核心原因 #

该问题的根本原因是误用了SCSS的嵌套规则：
你将针对.f-nav的媒体查询写在了外层.f-nav选择器的内部，同时又在媒体查询中重复写了.f-nav选择器。SCSS编译嵌套结构时会自动拼接父、子级选择器，因此生成了.f-nav .f-nav这种后代选择器，和你的预期不符。
编译后生成的这个选择器只会匹配父元素为.f-nav的子元素.f-nav，而你的页面结构里导航栏只有一个.f-nav元素，所以这条flex-wrap的样式完全不会生效，自然会导致导航栏样式异常。

修复方案 #

你只需要修改嵌套在.f-nav内部的媒体查询代码，不需要额外加.f-nav选择器即可，因为已经处于.f-nav的作用域下，编译时会自动把属性绑定到.f-nav上。

修改前的错误代码 #

@media (max-width:600px) {
  .f-nav {
    flex-wrap:wrap;
  }
}

修改后的正确代码 #

@media (max-width:600px) {
  flex-wrap:wrap;
}

修复后的完整SCSS示例 #

.f-nav {
    display:flex;
    justify-content:space-between;
    width:100%;
    height:100%;
    p {
        font-size:2rem;
        font-family:'Bebas Neue', sans-serif;
        margin-right:auto;
        padding-left:3rem;
    }
    li {
        display:inline-block;
        list-style:none;
    }
    a {
        display:inline-block;
        font-size:1.5rem;
        color:rgb(0, 0, 0);
        text-decoration:none;
        list-style:none;
        font-family:'Bebas Neue', sans-serif;
        padding:0 20px;
        margin-top:1.3rem;
    }
    @media (max-width:600px) {
        flex-wrap:wrap;
    }
      
    @media (max-width:600px) {
        p {
            text-align:center;
            align-items:center;
            padding-left: 10rem;
        }
    }    
}

修改后编译生成的CSS就会变成预期结构：

@media (max-width: 600px) {
  .f-nav {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

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