Sass mediaquerys及其所在地

使用ADOBE支架和考拉作为Sass/SCSS的IDE开发

我已经在外部样式表中定义了mediaqueries，并包含在@import“query.scss”中；在basic.scss的头部。这些查询被完全忽略。只有当我直接在basic.scs的末尾（！）输入它们时，它们在编译到basic.css后才会生效。为什么?

我认为查询定义的位置是不相关的，无论定义的位置如何，操作总是在事件发生时读取和应用。至少我在没有Sass/SCSS的情况下积累了这种经验

---

谢谢

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

SCSS

HTML

原始样式
新风格

你可以在这里看到它的作用：

---

生成的两个basic.css之间有区别吗？检查query.scss文件是否被正确引用，例如向query.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;
  }
}

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