能否在SCSS局部文件中，将@media规则写在对应选择器下方以提升编辑效率？

我刚把CSS项目转为SCSS，现在需要在多个局部文件间频繁切换，想知道能不能把元素对应的@media规则直接写在对应选择器下方的局部文件里，而不是放在专门的媒体查询文件底部。

传统CSS写法 #

#header {
  /* css style */
}
#nav{
  /* css style */
}
.nav-container {
  /* css style */
}
...
/* 700+ 行CSS代码 */
...
@media screen and (max-width: 900px) {
  #header {
    /* new css style */
  }
  #nav{
    /* new css style */
  }
}

@media screen and (max-width: 600px) {
  .nav-container {
    /* new css style */
  }
}

偏好的SCSS局部文件写法 #

// _header.scss
#header {
  /* css style */
}
// HEADER @MEDIA-QUERIES
@media screen and (max-width: 600px) {
  /* new header css style */
}
@media screen and (max-width: 400px) {
  /* new header css style */
}

// _nav.scss
#nav {
  /* css style */
}
.nav-container {
  /* css style */
}
// NAV @MEDIA-QUERIES
@media screen and (max-width: 600px) {
  /* new nav css style */
}
@media screen and (max-width: 400px) {
  /* new nav css style */
  /* new nav-container css style */
}

（注：你示例中的@media-queries是语法错误，正确写法为@media，已修正）

这种写法不仅是可接受的，更是SCSS生态中推荐的最佳实践之一，原因如下：

• 维护效率大幅提升：将同一元素的默认样式与响应式样式放在同一位置，无需在长文件末尾或专门的媒体查询文件中来回查找，尤其适合组件化的局部文件结构，每个组件的样式自包含，切换文件的成本更低，完全契合"关注点分离"的原则。
• SCSS原生特性支持：SCSS本身就支持媒体查询的灵活编写（甚至可以直接嵌套在选择器内部，比如#header { ... @media (...) { ... } }，写法更紧凑），编译时会自动处理语法并输出标准CSS，不存在兼容性问题。
• 性能影响可忽略：虽然这种写法编译后会生成多个相同断点的@media块，但现代浏览器对CSS的解析效率极高，除非你的项目存在数千个重复媒体查询，否则性能影响微乎其微。如果担心冗余，可以通过PostCSS插件（如postcss-combine-media-queries）在编译后自动合并相同断点的媒体查询。
• 对比传统写法的优势：传统将所有媒体查询放在文件底部的方式，在CSS代码量较大时，查找某个元素的响应式样式需要反复滚动文件，维护成本极高，而SCSS的这种写法恰好解决了这个痛点。

额外建议 #

为了保持项目的一致性，建议将断点定义为全局SCSS变量，比如：

// _variables.scss
$breakpoint-sm: 600px;
$breakpoint-xs: 400px;

然后在局部文件中引用变量：@media screen and (max-width: $breakpoint-sm)，避免硬写数值导致的断点不一致问题。

内容的提问来源于stack exchange，提问作者JMM