scss 的 & 必须放在选择器开头，因其仅为字符串拼接引擎，编译时静态替换为外层选择器完整字符串，不解析语义或 dom 结构；省略或错位将导致无效 css。
SCSS 的 & 不是语法糖，而是字符串拼接引擎；写错位置或省略它，生成的 CSS 就会失效甚至被浏览器忽略。
为什么 & 必须放在选择器开头？
SCSS 编译器把 & 当作当前选择器的完整字符串展开，不做语义解析。它不关心 DOM 结构，只做文本替换。
-
&只能在选择器最前面出现，后面紧接伪类（如:hover）、伪元素（如::before）或 BEM 后缀（如__header） - 写成
.btn { .icon:hover { ... } }→ 编译为独立规则.icon:hover，丢失.btn上下文 - 写成
.btn { hover { ... } }→ 编译出无效 CSS，浏览器直接报错Invalid selector - 正确写法：
.btn { &:hover { color: blue; } }→ 生成.btn:hover { color: blue; }
&:hover::before 和 &::before:hover 哪个合法？
伪元素不能挂伪类，顺序错了就编译失败或被浏览器忽略。
-
&:hover::before✅ 合法：表示“当元素处于 hover 状态时，才渲染::before” -
&::before:hover❌ 非法：CSS 规范禁止对伪元素应用伪类，SCSS 编译后仍是无效选择器 - 常见误用：
&::before { &:hover { ... } }→ 编译为.x::before:hover，浏览器静默丢弃 - 想实现“悬停时修改伪元素样式”，必须把伪类写在伪元素前面：
&:hover::before { content: "→"; }
嵌套中混用空格和 & 容易踩什么坑？
空格保留 CSS 选择器语义，& 不会自动补空格；一个空格差，匹配目标就完全变了。
-
&:hover .desc→ 编译为.item:hover .desc（后代选择器，.desc 在 .item 内任意深度） -
&:hover.desc→ 编译为.item:hover.desc（要求元素同时有 hover 状态和desc类） - 错误示例：
.item { &:hover { .desc { opacity: 1; } } }→ 实际生成.item:hover .desc，但开发者可能以为是.item:hover.desc - 如果真要匹配带
desc类的 hover 元素，得写成：&:hover.desc { ... }
原生 CSS 能直接用 & 吗？
不能。所有含 & 的代码必须经过 SCSS 编译，否则浏览器完全无视。
- 把
.btn { &:hover { color: red; } }直接扔进.css文件 → 浏览器解析失败，整条规则被跳过 - 开发时若用 Vite / Webpack，确保文件后缀是
.scss或.sass，且构建流程启用了 SCSS loader - 调试技巧：打开浏览器开发者工具 → 查看 Elements 面板里的最终 CSS → 确认是否已展开为真实选择器（如
.btn:hover），而不是还带着&
真正容易被忽略的是：SCSS 的 & 没有“作用域继承”概念，它只是字符串复制粘贴。写嵌套时别依赖直觉，每行都得想清楚编译后到底长什么样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
