css - node-sass，媒体查询和级联

Question

由于我对所使用的工具的模糊理解，我未能确定问题的根源。 node-sass 不提供媒体查询聚合，但 css-mqpacker 提供，这就是我必须寻找问题解决方案的地方。 https://github.com/hail2u/node-css-mqpacker/issues/49 .

如果出现以下情况，您的出路是什么。

我通过 @import 合并两个部分 .scss 文件到基本文件。每个文件都有媒体查询，它们为页面的各个元素提供样式。

  /* contents of index.scss */
  @import "_block.scss", "_block-2.scss";

第一个文件引入了两个断点，这些断点在 sass 编译样式表中的出现顺序是按此文件中的顺序定义的。

/* contents of _block.scss */
.block {
  @media (max-width: 500px) {...}
  @media (max-width: 450px) {...}
}

第二个文件的 @import 具有相同的断点集和一个用于 max-width: 550px 的断点。

/* contents of _block-2.scss */
.block-2 {
  @media (max-width: 550px) {...}
  @media (max-width: 500px) {...}
  @media (max-width: 450px) {...}
}

相同的断点在编译期间聚合，但一个新的断点被放置在编译样式表的末尾，覆盖特定元素的所有断点的属性，这是不可取的行为。

/* stylesheet compiled by sass */
@media screen and (max-width: 500px) {
    .block {...}
    .block-2 {...}
}
@media screen and (max-width: 450px) {
    .block {...}
    .block-2 {...}
}
@media screen and (max-width: 550px) {
    .block-2 {...}
}

什么是正确的解决方案？

这个例子代表一个元素，我不能在第一个文件之前导入第二个文件，因为它引入了另一个覆盖问题。 我最终定义了专门为所有现有断点排序的样式，并尽早引入它，但这是我根本不喜欢的 hack，所以我仍然需要优雅的解决方案。

如果它导致这样的影响，我担心嵌套在 CSS 规则中的媒体查询是否有用。在桌面优先和移动优先媒体查询顺序很重要，但即使在这种简单的情况下我也无法充分控制它。

Answer 1

.block {
    background-color: lightblue;
}
@media screen and (max-width: 500px) {
    .block {
        background-color: lightgreen;
    }
}
@media screen and (max-width: 450px) {
    .block {
        background-color: lavender;
    }
}

另见 https://www.w3schools.com/css/css_rwd_mediaqueries.asp