&必须正确引用父选择器：它展开的是完整已解析的父选择器序列，非字符串拼接；须单独使用，多层嵌套时仅指向直接父级，伪元素须用双冒号，状态类应连写不可空格。
用 & 正确引用父选择器，不是拼字符串
很多人以为 & 是把父选择器“复制粘贴”过来，结果写出 &:hover &__item 这种错误——它实际编译成 .nav:hover .nav__item，但本意可能是想加个嵌套状态类。关键在于：& 展开的是**完整、已解析的父选择器序列**，包括所有层级和伪类，不是字符串模板。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
&必须单独出现，不能拆开或混在字符串里（比如"&-active"是错的，要用&-active） - 多层嵌套时，
&指向的是**直接父级**，不是最外层；如果需要向上跨级，得靠命名约定或@at-root - 当父选择器含空格（如
.card .header），&会展开为整个片段，此时&:before会变成.card .header:before，注意是否符合 BFC 触发意图
触发BFC时，& 配合 overflow 或 display 要小心层级污染
想用 Sass 给某个组件内部块强制创建 BFC，常会写 .list { &__item { overflow: hidden; } }。问题在于：如果 .list__item 本身已有浮动或绝对定位，overflow: hidden 确实能触发 BFC，但它的作用范围只限于该元素自身，不会影响父级 .list 的布局表现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 真正要让父容器形成 BFC，得在父选择器上设
overflow: hidden或display: flow-root，此时应写.list { overflow: hidden; &__item { ... } }，而不是把&用在子项上误以为能反向控制父级 -
display: flow-root兼容性略差（IE 不支持），若需兼容，优先用& { display: flex; }或& { overflow: auto; }，但要注意滚动条副作用 - 避免在
&后直接接复合属性（如&.is-open），Sass 会把它当作一个整体选择器；若父级有多个状态类，最好拆成独立规则
状态类组合（如 is-active is-disabled）用 & 写法容易漏掉空格逻辑
写 .btn { &.is-active.is-disabled { opacity: 0.5; } } 本意是匹配同时带两个类的按钮，但 Sass 编译后是 .btn.is-active.is-disabled —— 这没问题；可一旦改成 &.is-active &.is-disabled，就变成要求同一个元素被选中两次，CSS 不合法，编译报错 Invalid CSS after "...is-active": expected "{", was "&.is-disabled"。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 多个状态类共存，一律用连写
&.is-active.is-loading，不要用空格或&重复引用 - 若需“父子不同状态”组合（如
.panel.is-collapsed .panel__content），必须显式写出层级，&无法跨节点跳转；此时更适合用@at-root提升作用域 - 动态状态类名（如
$state: "loading"）不要尝试拼"&.is-#{$state}"，Sass 不支持变量插值进选择器（除非用@extend或 map 配合@each）
Sass 3.4+ 后 & 在伪元素里不自动补冒号，&::before 必须手写双冒号
老项目升级 Sass 版本后，常发现 &:before 编译出错或样式不生效。原因是 Sass 3.4 开始严格区分伪类（单冒号）和伪元素（双冒号），&:before 被视为伪类语法，而现代浏览器只认 ::before。但 & 本身不改写冒号数量，它只是原样拼接。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用双冒号写法：
&::before、&::after，避免兼容性陷阱 - 若需兼容 IE8，不能依赖
&自动生成单冒号，得单独写.icon:before规则，&在这里帮不上忙 - 伪类如
:hover、:focus仍用单冒号，&:hover安全；但&:first-child和&::first-letter别混用冒号风格
真正麻烦的是嵌套过深时 & 的指向突然变模糊，比如三层 @mixin 套一层 @include，再加 &，很容易误以为它还指最外层——其实早被中间层截断了。这时候别硬套 &，宁可提一层写死选择器。
