&不是失效，而是使用错误：必须紧贴父选择器无空格；不可当变量随意缩进；嵌套时易生成意外空格；媒体查询中仍指外层父选择器；@import错用url()会导致SCSS未编译。
& 不是“失效”，而是它根本没被你写对位置，或者你误以为它该干的事，其实不是它的职责。
SCSS中&必须紧贴父选择器，不能加空格或换行
常见错误是把 & 当成普通变量，随意缩进或空格分隔：
-
.btn { & :hover { ... } }→ 编译出.btn :hover（带空格，变成后代选择器，不是按钮自身的悬停） -
.btn { &\n:hover { ... } }→ Sass 解析失败，报错Invalid CSS after "&": expected "{", was ":hover" - 正确写法只有：
.btn { &:hover { ... } }，&和伪类之间**不能有任何空白字符**
嵌套过深时&会生成意外的空格分隔选择器
你以为在写 BEM 修饰符，结果编译出的是后代关系而非连字符类名：
- 错误写法：
.block { &__element { &--modifier { color: red; } } }→ 编译为.block .block__element .block__element--modifier（三个独立类、两层空格） - 真正想要的
.block__element--modifier，得把修饰符写在同级：.block { &__element--modifier { color: red; } } - 如果真要动态拼接，得用插值：
.block__element#{&}--modifier（仅 Sass 3.4+ 支持，且只适用于类名拼接，不推荐滥用）
媒体查询内&引用的是外部父选择器，不是媒体查询本身
很多人以为 @media (max-width: 768px) { &:hover { ... } } 中的 & 指向媒体查询，其实它仍指向外层最近的类：
-
.card { @media (max-width: 768px) { &:hover { opacity: 0.8; } } }→ 编译为@media (max-width: 768px) { .card:hover { opacity: 0.8; } } - 如果你想在媒体查询里改子元素，得显式写出：
.card { @media (max-width: 768px) { &__title { font-size: 14px; } } } - 别指望
&能跨过@media去“继承”媒体查询条件——它不处理条件逻辑，只拼字符串
uni-app 或某些构建环境里&看似失效，其实是@import写法错了
APP端嵌套样式全丢，但 H5 和小程序正常，大概率不是 & 的问题，而是 SCSS 文件没被正确加载：
- 错误写法：
@import url('./mixins.scss');（Vue 单文件组件中，url()会被当成 CSS@import，不走预处理器） - 正确写法：
@import './mixins.scss';（无url()，SCSS 编译器才识别） - 这个错误不会报错，但会导致所有嵌套、
&、变量全部不参与编译——看起来像“&失效”，其实是整个 SCSS 没跑起来
最常被忽略的一点：& 不是魔法符号，它只是编译期的字符串拼接锚点。你写的每个多余空格、每一层错位嵌套、每一次想当然的插值，都会在生成的 CSS 里留下痕迹——而浏览器只认最终那个选择器是否匹配 DOM。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
