node-sass，媒体查询和级联答案

【问题标题】：node-sass, media queries and cascadingnode-sass，媒体查询和级联
【发布时间】：2018-09-29 23:21:18
【问题描述】：

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

你有什么办法摆脱以下情况。

我通过@importing 将两个部分 .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 规则中的媒体查询会导致这种影响，我担心它是否有用。在桌面优先和移动优先媒体查询中，顺序很重要，但即使在这种简单的情况下，我也没有足够的控制权。

【问题讨论】：

您必须提供更多上下文，因为我们不知道它会影响哪些类以及必须归档的原因是什么？
如果您无法更改文件的顺序，请更改文件的内容以使其正常工作。也许您的选择器过于通用，因此它们会相互覆盖。通常，您将使用更通用的 css 作为第一个文件，例如设置网站全局组件样式的全局 css，然后使用更具体的页面 css。
@Dejan.S 类与 IMO 的相关性不高，它们给解释增加了一些复杂性。让我们假设第二个文件包含.block-2 的样式，并且媒体查询只修改背景颜色。有两个文件，因为我更容易将每个组件的样式放在单独的文件中。

标签： css media-queries node-sass

【解决方案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

【讨论】：

为什么450px之前有500px？
我是根据提供的问题写的
@Dejan.S 解决方案是使用max-width，为什么在450之前没有500？
@Huangism ~ 我没明白？你在告诉我吗？
在不需要强调时，请不要使用斜体或其他突出显示。

【解决方案2】：

我添加了您当前的设置和建议的解决方案。这是假设您确实需要按照您解释的顺序运行 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>

【讨论】：