mediaquerys和包括

Question

使用ADOBE Bracket和Koala作为Sass / SCSS的IDE开发。

我在外部样式表中定义了媒体查询，并在 basic.scss 的头部包含 @import“query.scss”; 。查询完全被忽略。只有当我直接在 basic.scss 的末尾（！）输入它们时，它们才会在编译到 basic.css 之后产生影响。为什么呢？

我认为查询定义的位置无关紧要，无论定义的位置如何，始终会在事件发生时读取和应用操作。至少我在没有Sass / SCSS的情况下开发了这种经验。

由于

Answer 1

您的意思是导入的样式表包含应该覆盖默认样式的媒体查询所包围的规则吗？媒体查询根本不会增加CSS特性，因此顺序仍然很重要。对于具有相同特异性的规则的CSS和SASS / SCSS，最后的规则是适用的规则。在此示例中，类原始字体大小为20，而new类将显示42px的字体大小;

SCSS

@media screen and (min-width: 1px)  {
  .original {
    font-size: 42px;
  }
}

.original {
  font-size: 20px;
}

.new {
  font-size: 20px;
}

@media screen and (min-width: 1px) {
  .new {
    font-size: 42px;
  }
}

HTML

<div class="original">Original Styles</div>
<div class="new">New Styles</div>

你可以在这里看到它： https://jsfiddle.net/2y7Lramt/