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 {...}
}

什么是正确的解决方案？

此示例表示一个项目，我无法在第一个文件之前导入第二个文件，因为它引入了覆盖的另一个问题。我最后定义了专门定义所有现有断点的样式，并尽早引入它，但这是一个我根本不喜欢的黑客，所以我仍然需要优雅的解决方案。

它关注我是否有用于嵌套在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

Answer 2

我添加了您当前的设置＆amp;和建议的解决方案。假设您确实需要按照解释的顺序运行2个css文件。还假设您希望保持原样但最终结果有效。

由于您可能（由于某种原因）不想删除CSS中的原始值，您必须将您不想使用的值设置为透明。这是背景色原始默认值。

作为第二步，您需要确定您真正想要的最大宽度。当您知道可以通过添加“！important”来确保系统使用它时。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

<style>

/* Current setup */
@media (max-width: 500px) {body {background-color: red}}
@media (max-width: 450px) {body {background-color: blue}}
@media (max-width: 550px) {body {background-color: green}}

/* Solution */
@media (max-width: 500px) {body {background-color: transparent}}
@media (max-width: 450px) {body {background-color: yellow !important;}}
@media (max-width: 550px) {body {background-color: transparent}}


</style>

</head>
<body>
  test
</body>
</html>

node-sass，媒体查询和级联

2 个答案: