&符号是scss中编译期静态展开的父选择器占位符，仅在嵌套块内有效且须位于选择器开头；其展开保留原父选择器的空格与关系符，支持交集、伪类及属性选择器，但多父选择器会引发笛卡尔积式组合爆炸，深层嵌套还易导致选择器过长与特异性失控。
& 符号不是“自动补全父类名”的快捷键，而是编译期静态展开的父选择器占位符——它只在嵌套块内有效，且必须出现在选择器开头（或紧跟空格/关系符后）。
为什么 & + 空格会编译出后代选择器
SCSS 中 & 展开的是**整个父选择器字符串**，包括其中的空格和关系符。比如：.card > .header 嵌套 &__title，结果是 .card > .header__title，不是 .card__title 或 .header__title。
- 空格代表后代关系，
&会原样保留，所以.nav { & .link { } }→.nav .link -
&后紧接>、+、~时，也会保留：如.item { & + & { } }→.item + .item - 想生成
.nav__item a？不能写& a依赖推导，必须显式写出a，否则&a会变成.nav__itema（连写无空格）
&.modifier 和 &:hover 的区别在哪
&.modifier 是交集选择器（同时含两个 class），&:hover 是伪类，两者语法位置和语义完全不同。
-
&.active→ 编译为.btn.active（要求元素同时有btn和active） -
&:hover→ 编译为.btn:hover（状态伪类，冒号不可省略） - 写成
& :hover（带空格）就错了：会变成.btn :hover，即“.btn内部任意元素的 hover”，不是按钮自身 - 属性选择器同理：
&[type="submit"]可以，但& [type="submit"]就变成后代匹配，逻辑错位
多个并列父选择器下 & 怎么绑定
当外层是逗号分隔的选择器（如 .a, .b），& 会分别与每个父项组合，产生笛卡尔积式输出。
-
.a, .b { &__icon { } }→ 编译为.a__icon, .b__icon -
.a, .b { & + & { } }→ 编译为.a + .a, .a + .b, .b + .a, .b + .b - 这不是 bug，是设计行为，但容易导致选择器爆炸；若只需绑定第一个，应拆成独立规则
- 想避免组合爆炸？别用逗号写并列父选择器，改用
@at-root提到顶层，或抽成 mixin 显式传参
嵌套过深时 & 容易引发什么问题
每层嵌套都会让 & 展开为更长的选择器，四层以上不仅可读性骤降，还会触发浏览器性能警告。
- Chrome DevTools 对超过 100 字符的选择器标黄，Firefox 可能因此降级重排
-
.modal .content .body p已接近临界点；若再加&:first-child，就超长 - 深层嵌套中用
&拼属性选择器（如&[data-state="open"]）会让 specificity 飙升，后续覆盖极难 - 真正难调试的不是写法本身，而是当 DOM 结构微调后，
&展开的路径与实际层级不一致，样式突然失效却找不到原因
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
