Sass中伪类嵌套必须用&连接，如&:hover编译为.btn:hover；漏写&会导致编译错误或样式失效，&是明确作用域边界的必要符号。
伪类选择器嵌套在Sass里怎么写才不报错
直接写 :hover、::before 这类伪类时，Sass 会默认把它当普通子选择器处理——结果编译出错或样式不生效。根本原因是 Sass 的嵌套逻辑只认“父选择器 + 空格 + 子选择器”，而伪类属于同一元素上的状态修饰，不该加空格。
正确做法是用 & 显式连接：
-
&:hover→ 编译为.btn:hover -
&::before→ 编译为.btn::before - 错误写法：
:hover（无&）→ 编译成孤立的:hover，脱离上下文
Sass中&和空格混用导致伪类失效的典型场景
常见于按钮组件或表单控件的多层状态组合。比如想给禁用态下的悬停加特殊样式，但写了 :disabled:hover 就容易翻车。
- 错误：
.btn { :disabled:hover { opacity: 0.5; } }→ 编译失败，Sass 不识别这种链式伪类写法 - 正确：
.btn { &:disabled:hover { opacity: 0.5; } }→ 编译为.btn:disabled:hover - 更安全的写法：
.btn { &.is-disabled:hover { opacity: 0.5; } }，避免原生伪类兼容性问题（如 IE 不支持:disabled在非表单元素上）
伪元素::before/::after嵌套时内容必须用content
Sass 不会帮你补 content，漏写就完全不渲染。这不是 Sass 的 bug，而是 CSS 规范强制要求。
- 错误：
.icon { &::before { width: 16px; } }→ 元素存在但不可见 - 正确：
.icon { &::before { content: ""; display: inline-block; width: 16px; } } - 注意：
content: ""和content: none效果不同；后者仍会触发伪元素生成，但不显示内容，可能影响布局
复杂伪类组合（如:not(:first-child)）在Sass里怎么维护
嵌套层级一深，& 就容易被误用或漏掉，尤其带括号的否定伪类。这时候建议拆开写，而不是硬塞进一层嵌套里。
- 可读性优先：
.list-item { &:not(:first-child) { margin-top: 8px; } } - 避免嵌套过深：
.list { .list-item { &:not(:first-child) { ... } } }→ 编译后选择器权重飙升，且难以调试 - 性能提示：浏览器解析
:not()内部伪类时开销略高，高频列表项慎用，可用 class 替代（如.list-item--not-first）
Sass 嵌套伪类本身不难，难的是习惯性把 & 当作可选项——它其实是明确作用域边界的开关。漏一个 &，轻则样式不生效，重则整个块编译失败，而且错误提示往往不指向真正的问题位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
