为什么我在 scss 中的 div 类名在 css 中重复？

Question

在scss中

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

在css中

@media (max-width: 600px) {
  .f-nav .f-nav {
    -ms-flex-wrap: wrap;
        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) {
        .f-nav {
              flex-wrap:wrap;
          }
      }
      
      @media (max-width:600px) {
          p {
              text-align:center;
              align-items:center;
              padding-left: 10rem;
          }
      }    
}

Answer 1

这是因为您的 SCSS 是嵌套的。
如果你剪掉不相关的部分，它看起来像这样：

.f-nav {
  
  /*  
   Omitted styles
  */

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

这应该可以解决它：
（你已经在.f-nav里面了，不用再写了）

.f-nav {
  
  /*  
   Omitted styles
  */

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

此外，这只是个人喜好问题，但我喜欢在之后添加我的媒体查询，所以我不必滚动太多来了解正在发生的事情。
这是一个使用整个 scss 的示例：

.f-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;

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

  p {
    font-size: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    margin-right: auto;
    padding-left: 3rem;

    @media (max-width:600px) {
      text-align: center;
      align-items: center;
      padding-left: 10rem;
    }
  }

  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;
  }
}