SCSS中嵌套伪类和伪元素需分开书写，如&:hover和&::before不可连写；::before/::after必须显式声明content才渲染，且双冒号为CSS3标准写法。
直接用嵌套 + & 就能避免重复写选择器，但必须注意伪类和伪元素的冒号规则、渲染顺序、以及content必须显式声明——否则::before/::after不会渲染。
SCSS里怎么嵌套:hover和::before才不报错
SCSS本身不校验伪类/伪元素语法，但浏览器只认标准写法。错误写法如&:hover::before在旧版编译器可能被当作单一伪类处理，导致样式失效。
-
&:hover和&::before必须分开嵌套，不能连写；正确写法是先写主体，再在内部用&:hover和&::before各自声明 - 双冒号
::before是CSS3规范，SCSS中也应优先用双冒号；单冒号:before虽兼容，但新项目混用容易引发维护困惑 - 如果父选择器用了
scoped（如Vue SFC），::before生成的内容仍受作用域影响，但无法通过:deep()穿透控制其子伪元素——这点常被忽略
用&简化:nth-child和:not组合场景
结构性伪类经常要叠加使用，比如“除了第一个以外的所有按钮加右边距”，手写容易漏空格或括号错位。
- 推荐写法：
&:not(:first-child) { margin-left: 8px; }，&自动拼接父选择器，不用重复写.btn或button -
:nth-child(2n)这类带参数的伪类，括号必须保留，SCSS不会帮你补全；误写成&:nth-child2n会静默失败 - 多个伪类连用时，顺序影响匹配结果：例如
input:disabled:focus永远不生效（禁用元素无法获得焦点），这种逻辑错误嵌套也救不了
::before和::after在SCSS中必须配content
这是最常踩的坑：写了&::before { background: red; width: 10px; }，页面却什么也不显示——因为没设content。
立即学习“前端免费学习笔记（深入）”；
-
content值可以是""（空字符串）、" "（空格）、attr(data-tip)或url(...)，但绝不能省略 - 若只是想用伪元素做装饰块（无文字），务必写
content: ""，并配合display: block或inline-block - 在SCSS中可抽成变量复用：
$icon-bullet: "•";，然后&::before { content: $icon-bullet; }
真正难的不是写对语法，而是理解伪元素的渲染层独立于DOM——它能响应transform和opacity，但无法绑定JS事件，也不能被querySelector选中。这个边界，嵌套再深也跨不过去。
