SCSS中&是父选择器引用，用于拼接伪类/伪元素，如.button:hover编译为.button:hover；错误省略&会导致无效CSS，且&只做字符串替换，不理解DOM结构。
原生 CSS 不支持 &，所有带 & 的写法必须经 SCSS/Sass 编译后才能生效；直接扔进 .css 文件里，浏览器会完全忽略。
SCSS 中 & 怎么正确拼接伪元素
& 在 SCSS 里代表「当前选择器的完整展开结果」，不是“父元素”，也不是“上一层”。它只做字符串替换，不理解 DOM 结构。
-
.btn { &::before { content: "→"; } }→ 编译为.btn::before { content: "→"; } -
.card { &__title::after { content: ":"; } }→ 编译为.card__title::after { content: ":"; }（注意：这不是嵌套关系，而是类名拼接） - 错误写法：
.wrapper { .content::before { ... } }—— 没用&，编译后变成独立规则.content::before，丢失了上下文约束
为什么 &:hover 不能写成 :hover 在嵌套块里
省略 & 就等于脱离当前作用域。SCSS 不会自动把无前缀的伪类挂到父选择器上。
- ✅ 正确：
.link { &:hover { color: #007bff; } }→.link:hover - ❌ 错误：
.link { :hover { color: #007bff; } }→ 编译出无效 CSS（浏览器报语法错误） - ⚠️ 特别注意：
.item { &:hover .desc { opacity: 1; } }是合法的，它生成.item:hover .desc，不是.item:hover.desc—— 空格保留语义
伪元素 + 伪类组合时 & 的顺序不能错
顺序决定最终选择器结构。&::before:hover 是非法的（伪元素不能有伪类），但 &:hover::before 是合法的 —— 表示「元素 hover 时才渲染伪元素」。
立即学习“前端免费学习笔记（深入）”；
- ✅
.toggle { &:hover::before { content: "★"; } }→.toggle:hover::before - ❌
.toggle { &::before:hover { ... } }→ 编译失败或被忽略（CSS 规范禁止） - ? 实用技巧：想控制 disabled 状态下的图标颜色？
.btn { &:disabled::before { opacity: 0.4; } }
最易被忽略的一点：SCSS 的 & 不做逻辑判断，只做文本拼接。你写的每一个 & 都得对应一个明确的、可预期的输出选择器，否则调试时根本看不出哪段没生效。
