父选择器丢失的典型表现是编译后选择器“断层”，如.card { .header { } }生成孤立的.header而非.card .header，主因是&后误加空格、子选择器未用&绑定或HTML中对应class缺失。

父选择器丢失的典型表现：编译后选择器“断层”

你写的是 .card { .header { color: red; } }，但浏览器里根本没生效——检查 DevTools 发现生成的是 .header 而不是 .card .header。这不是 CSS 未加载，而是 SCSS 编译时把父级“丢”了，导致选择器变成孤立全局类，极易被覆盖或误匹配。

为什么 & 在空格后失效？

& 必须紧贴父选择器末尾，中间不能有空格；一旦加空格，Dart Sass 就认为它是新选择器起点，而非引用父级。

• 错误写法：.card { & .header { } } → 编译出 .card .header（看似对，但 & 实际未参与拼接，只是占位）
• 更危险的错误：.card { & :hover { } }（& 后带空格）→ 直接报错 SassError: Invalid CSS after "&": expected "{", was ":hover"
• 正确写法：.card { &:hover { } } 或 .card { &__title { } }，& 紧贴前一个字符，无空格

两层嵌套却只生成一层 CSS 的原因

SCSS 嵌套不是“视觉缩进即生效”，而是依赖选择器关系推导。如果子选择器开头不含 &、@at-root 或明确关系符（>、+、~），它会被当作独立顶层规则处理。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 错误示例：.emotion { __text { color: blue; } } → 编译为 __text { }（非法选择器，直接被忽略）
• 正确写法必须显式绑定：.emotion { &__text { color: blue; } } → .emotion__text { }
• 若想保留后代关系：.emotion { .emotion__text { color: blue; } }，但此时已脱离 BEM 拼接逻辑，权重上升

HTML class 缺失时，嵌套永远不生效

SCSS 编译结果完全取决于你写的 class 名，和 HTML 结构无关；但样式是否起作用，100% 取决于 HTML 是否真有对应 class。常见“失效”本质是脱节。

立即学习“前端免费学习笔记（深入）”；

• 你写了 .card { &__body { padding: 1rem; } } → 生成 .card__body { }
• 但 HTML 是 <div class="card"><div class="body">...</div></div> → .card__body 永远不匹配
• 修复方式只有两个：class="card__body"（改 HTML），或改 SCSS 为 .card .body { }（放弃 BEM 拼接）

真正卡住人的从来不是“怎么让嵌套看起来更整齐”，而是“删掉这一层缩进后，HTML 还有没有对应 class”。没有，就别嵌；有，再确认 & 是否紧贴、是否有空格、是否混用了 ID 或属性选择器——这些地方一错，父级就彻底丢了。