devtools难以定位嵌套样式规则，因scss编译后选择器层级膨胀、命名断层、&符号误用导致实际类名与html不匹配，且媒体查询与嵌套耦合加剧调试复杂度。
DevTools里找不到对应规则，是因为选择器被编译“变形”了
你写的 .card { .title { color: red; } }，编译后变成 .card .title —— 看似合理，但一旦嵌套超三层，比如 .page .main .content { .card { .title { } } }，实际输出是 .page .main .content .card .title。DevTools 的 “Styles” 面板会按源码顺序列出规则，但这个长选择器可能被排在几十条灰色（未生效）规则中间，根本没法快速定位。
更麻烦的是：SCSS 源码缩进层级 ≠ 编译后选择器层级。比如 .modal { &__header { &__title { } } } 会产出 .modal__header__title，但这个类名在 HTML 里根本不存在，结果 DevTools 显示“无匹配”，你以为是写错了，其实是命名逻辑断层。
- 用
Ctrl+F在 DevTools 的 “Computed” 面板搜color: red，常找不到来源，因为真正生效的可能是.card__title或.page .main .content .card .title，两者权重差两级 - 右键元素 → “Break on attribute change” 对 class 生效，但对样式不触发断点；想监控某段嵌套是否命中？没原生支持
- Stylelint 的
selector-max-compound-selectors: 3能提前报错，但只检查编译前源码，对&展开后的实际输出无感知
父选择器丢失时，样式“看似写了却完全不生效”
最典型的失控行为是 & 后多了一个空格：.card { & .title { } }。这不会报错，但编译结果是 .card .title（& 实际被忽略），而非你预期的 .card__title。更隐蔽的是在伪类中误用：.card { &:hover { &__body { } } }，这里 &__body 展开成 .card__body，但外层 &:hover 已经把路径拉长，最终生成 .card:hover .card__body —— 多出一层后代关系，HTML 中只要 .card__body 不在 .card:hover 内部，就彻底不匹配。
-
&必须紧贴前一个字符，&.active和& .active是两种完全不同语义的选择器 - ID 或属性选择器后接
&:hover（如#header { &:focus { } }）会导致权重飙升到100+，后续任何类名都覆盖不了 - HTML 中 class 缺失比 SCSS 写错更常见：你写了
.card { &__footer { } }，但 HTML 是<div class="card"><footer></footer></div>—— 没有card__footer这个类，样式永远不触发
媒体查询 + 嵌套 + & 符号 = 调试黑洞
@media 块里继续用 &，它会展开整个外层嵌套路径。例如在 .layout .dashboard 下写 @media (min-width: 768px) { .card { &__title { } } }，编译后是 @media (min-width: 768px) { .layout .dashboard .card__title { } }。这个选择器不仅长度爆炸，而且在 DevTools 里会分散在不同媒体查询区块中，无法按组件归类查看。
- 这种规则在 “Coverage” 面板里常显示为“未使用”，因为真实 DOM 很难同时满足所有层级条件
- 修改断点值后，整块 CSS 重排，但你无法判断是媒体查询没触发，还是选择器本身没匹配上
- 想复现某个响应式状态？必须手动切窗口尺寸 + 切 HTML class + 切 JS 状态，三者缺一不可，而嵌套规则把它们全耦合在一起
真正卡住人的不是嵌套语法，而是 HTML 和 CSS 的 class 名脱节
调试嵌套样式，90% 的时间花在确认“这个 class 到底有没有出现在 HTML 里”。你看到 .card__title 在 DevTools 里灰掉，第一反应是 SCSS 写错了，但大概率是前端模板漏写了 class，或者 SSR 渲染时条件分支没走通。BEM 类名必须显式写出，不能靠结构推导；@at-root 提级能减少冗余，但也意味着你要主动管理哪些样式该“逃逸”、哪些该保留上下文——这个决策没有自动提示，全靠经验判断。
当产品频繁调整 DOM 结构时，嵌套深度和 class 名称的同步成本会指数上升。不是工具不行，是人脑难以持续追踪“这一行 SCSS 最终对应哪几个 HTML class + 是否被其他规则覆盖 + 在哪个断点下生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
