html - SCSS 编译器在编译为 CSS 时降低了特异性

Question

我有一个 SCSS 编译器问题要问你!

我目前正在重构我的第一个元素以使用 SCSS(以及一个更结构化的样式表归档系统，即分成部分、模块等)以了解更多关于 SCSS 方法的信息，但我遇到了一个问题令我疯狂的编译器。

这是一个被编译器弄乱的代码示例:

#navBar {
.desktopMenu {
 .dropdownExcluder {
    display: none;
    }
 }
}

上面的代码告诉浏览器不要显示我创建的用于桌面 View 显示的 html 元素。然后使用媒体查询，我将显示设置为在 >=620px 处为该给定元素 flex :

@media screen and (min-width: 620px) {
 #navBar {
      .desktopMenu {
         .dropdownExcluder {
            display: flex;
        }
      }
  }
}

在这两个示例中，我都使用嵌套将类嵌套在 ID 选择器的类中。但是对于第二个示例，代码随后再次嵌套在媒体查询中。编译器的问题是第一个示例被渲染成 CSS 为:

#navBar .dropdownExcluder .desktopMenu {
 display: none;
}

第二个例子被渲染到 CSS 中:

@media screen and (min-width: 620px) {
 #navBar .desktopMenu {
   display: flex;
 }
}

正如您将看到的，编译器已从选择器中排除(对于媒体查询).dropdownExcluder 类。它应该读作:

@media screen and (min-width: 620px) {
 #navBar .dropdownExcluder .desktopMenu {
   display: flex;
 }
}

编译器以这种方式工作的问题在于，由于媒体查询中选择器的特异性降低了(特异性呈现得不如媒体查询外的相同选择器的特异性)，那么尽管有媒体查询原始选择器使用媒体查询覆盖了代码，即使我可以看到显示:flex 已在浏览器中设置，它也被原始选择器中的 display:none 覆盖。

有没有人遇到过这样的问题？这个 stackoverflow 问题帮助我弄清楚了特异性问题 Media Query Styles Not Overriding Original Styles但是有没有办法强制编译器进行“严格编译”，或者我只是在编造条件？

Answer 1

尝试使用这种方式

#navBar {
    .desktopMenu {
      @media (min-width: 620px) {
         .dropdownExcluder {
             display: flex
         }
      }
   }  
} 

for more info see nesting in SASS