本文详解为何将媒体查询写在 SCSS 外层时样式不生效，并演示如何通过嵌套式媒体查询（nesting）精准控制响应式布局，确保 max-width 和 display: grid 在桌面端正确应用。
本文详解为何将媒体查询写在 scss 外层时样式不生效，并演示如何通过嵌套式媒体查询（nesting）精准控制响应式布局，确保 `max-width` 和 `display: grid` 在桌面端正确应用。
在移动端优先（mobile-first）的 SCSS 开发中，一个常见误区是：将媒体查询写在选择器外部（即全局作用域），却期望它能覆盖嵌套在父选择器内的样式规则。这正是原问题的根本原因——你当前的 SCSS 写法中：
@media (min-width: 768px) {
.heading { max-width: 540px; }
.cards-container { display: grid; }
}看似合理，但因 .heading 和 .cards-container 均定义在 main 的嵌套作用域内（即 .heading 实际编译为 main .heading），而外层媒体查询中的 .heading 并未继承该层级关系，导致 CSS 特异性（specificity）不足，被更高权重的嵌套规则覆盖，最终样式不生效。
✅ 正确解法是：将 @media 声明直接嵌套在对应选择器内部。SCSS 支持嵌套媒体查询，它会自动拼接父选择器，生成高特异性、上下文准确的 CSS：
main {
// ...其他样式
.heading {
max-width: 311px;
text-align: center;
@media (min-width: 768px) {
max-width: 540px; // ✅ 编译后为：main .heading@media(min-width: 768px)
}
h1 { /* ... */ }
}
.cards-container {
display: flex;
flex-direction: column;
@media (min-width: 768px) {
display: grid;
grid-template-rows: repeat(2, 1fr); // ⚠️ 原代码中 `repeat(6, 1fr)` 过度分割，建议改为 `repeat(2, 1fr)` 配合 `grid-template-columns: repeat(2, 1fr)` 实现 2×2 卡片网格
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
.card { /* ... */ }
}
}? 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
-
特异性优先级：嵌套媒体查询生成的选择器（如
main .cards-container@media(...)）比孤立的.cards-container@media(...)具有更高特异性，能可靠覆盖基础样式。 -
grid-template-rows逻辑修正：原代码使用repeat(6, 1fr)会导致 6 行单列布局，违背“四卡片横排”设计意图。应配合grid-template-columns: repeat(2, 1fr)实现响应式 2×2 网格。 -
单位一致性：确保
gap、padding等值在媒体查询内外协调，避免断点处布局突变。 - 编译验证：使用 Sass 编译器（如 Dart Sass）检查输出 CSS，确认媒体查询是否正确包裹在目标选择器下。
? 总结：SCSS 嵌套不仅是语法糖，更是维护样式作用域与特异性的核心机制。将媒体查询置于具体选择器内部，既提升可读性，又杜绝因选择器层级错配导致的样式失效问题——这是构建健壮响应式系统的必备实践。
