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

Question

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

我目前正在重构我的第一个项目以使用 SCSS（以及更结构化的样式表文件系统，即拆分为部分、模块等）来了解有关 SCSS 方法的更多信息，但我遇到了一个问题让我疯狂的编译器。

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

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

上面的代码告诉浏览器不要显示我创建的 html 元素作为桌面视图的显示。然后使用媒体查询我将显示设置为> = 620px的给定元素：

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

编译器以这种方式工作的问题在于，因为媒体查询中选择器的特异性降低了（特异性比媒体查询之外的相同选择器的特异性降低了），尽管媒体查询原始选择器使用媒体查询覆盖代码，即使我可以看到 display: 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