Fatal编程技术网
  • css/
  • Css 节点sass、媒体查询和级联

Css 节点sass、媒体查询和级联

css

Css 节点sass、媒体查询和级联,css,media-queries,node-sass,Css,Media Queries,Node Sass,由于我对所使用的工具理解模糊，我未能确定问题的根源。节点sass不提供媒体查询聚合，但css mqpacker提供聚合，这就是我必须寻找问题解决方案的地方 你将如何摆脱以下情况 我通过@import将两个部分.scss文件合并到基本文件中。每个文件都有媒体查询，它们为页面的各个元素提供样式 /* contents of index.scss */ @import "_block.scss", "_block-2.scss"; 第一个文件引入两个断点，这些断点在sass编译样式表中的出现

由于我对所使用的工具理解模糊，我未能确定问题的根源。节点sass不提供媒体查询聚合，但css mqpacker提供聚合，这就是我必须寻找问题解决方案的地方

你将如何摆脱以下情况

我通过
@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
具有相同的断点集，加上一个用于
最大宽度：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规则中嵌套了媒体查询，那么它是否会导致这样的影响。在desktop first和mobile first media查询中，顺序问题非常重要，但即使在这个简单的情况下，我也无法充分控制它

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

我添加了您当前的设置和建议的解决方案。 这是假设您确实需要按照您解释的顺序运行2个css文件。还假定您希望保持原样，但最终结果仍能正常工作

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

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


文件
/*当前设置*/
@介质（最大宽度：500px）{主体{背景色：红色}
@介质（最大宽度：450px）{主体{背景色：蓝色}
@介质（最大宽度：550px）{主体{背景色：绿色}
/*解决方案*/
@介质（最大宽度：500px）{主体{背景色：透明}
@介质（最大宽度：450px）{主体{背景颜色：黄色！重要；}
@介质（最大宽度：550px）{主体{背景色：透明}
测试
为什么在450px之前有500px？我是根据这个问题写的Provided@Dejan.S解决方案是使用最大宽度，为什么不在450之前使用500？@Huangism~我没有得到它？你是在告诉我吗？当不需要添加强调时，请不要使用斜体或其他突出显示。你必须提供更多的上下文，因为我们不知道它会影响哪些类以及需要创建文件的原因是什么？如果你不能更改文件的顺序，那么请更改文件的内容，以便它正常工作。也许你的选择器太通用了，所以它们会互相覆盖。一般来说，第一个文件是一个更通用的css，就像一个为站点的全局组件设置样式的全局css，然后是一个更具体的页面css。@Dejan.S类与IMO不太相关，它们增加了一些解释的复杂性。假设第二个文件包含
.block-2
的样式，媒体查询只修改背景颜色。有两个文件，因为我更容易将每个组件的样式放置到单独的文件中。 
<!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>