sass中&:hover权重失控因&完整复制父选择器路径，如.dashboard .layout .card:hover（0,3,1）远超预期的.card:hover（0,1,1），导致覆盖困难；:not()嵌套则生成非法css被浏览器丢弃，须拆解为单层:not()+简单选择器。
伪类嵌套错误在 Sass 中几乎从不报“语法错误”，而是悄无声息地生成非法 CSS、权重失控或规则消失——修复的关键不是改写法，是看编译输出、掐断&的误拼、避开预处理器解析盲区。
为什么 &:hover 编译后选择器权重高得离谱
Sass 的 & 不是“当前元素”，是父选择器字符串的完整复制。一旦父级本身已嵌套多层，&:hover 就会把整条路径拖进来。
- .dashboard .layout .card { &:hover { color: red; } } → 编译为
.dashboard .layout .card:hover（权重 0,3,1） - 而你真正想控制的可能只是
.card:hover（0,1,1），结果被.card--highlight（0,1,0）轻松覆盖 - 更危险的是 ID 或属性选择器后跟
&:focus：#header { &:focus { } }→#header:focus（权重 100+），后续基本只能靠!important硬顶
:not() 嵌套进 Sass 为什么会直接失效
浏览器不支持 :not() 嵌套，Sass 却不校验——它照常编译，但生成的选择器非法，DevTools 里该规则直接灰掉，控制台也不报错。
- 错误写法：
.item { &:not(.active) { } }→.item:not(.active)（合法），但若写成&:not(:not(.active))或&:not(.a):not(.b:hover)，就产出非法语法，整条规则被丢弃 - 安全拆解：用 BEM Modifier 明确状态，比如
.list__item:not(.list__item--first):not(.list__item--last) - 逻辑陷阱：
:not(.disabled):not(.required)匹配“既不 disabled 也不 required”的元素；要匹配“不同时具备这两个类”，得写成:not(.disabled.required)
SCSS 文件里 } 后面藏了个逗号，怎么快速揪出来
SassError: Invalid CSS after "}" 这类报错，90% 是因为 } 后紧跟着逗号、空格或换行——Sass 解析器以为该写新规则，结果撞上空白或符号，当场懵住。
- 别信报错行号，全局搜索
}，挨个检查每个}后面是不是有,（尤其 Vue 单文件组件<style lang="scss"></style>末尾、AI 生成代码块结尾） - VS Code 开启「显示空白字符」（Ctrl+Shift+P → Toggle Render Whitespace），确认有没有隐藏 Tab 或混用空格
- 典型案发现场：
.btn { &--large { } },多出的逗号卡在块外；或& :hover中间多了空格，导致&失效变成后代选择器
:is() 在 Sass 里写就报错，还能不能用
旧版 Sass（如 Node Sass）和部分 Less 配置根本不认识 :is()，直接当非法伪类处理——轻则跳过整条规则，重则编译中断。
- Sass v1.33+（Dart Sass）才开始原生识别；Node Sass 已废弃，无法支持
- 最稳写法：用插值
#{':is(button, a)'}绕过解析，比如.menu:hover, #{':is(button, a)'}:focus { opacity: 1; } - 禁用嵌套写法：
.box { &:is(:hover, :active) { } }—— Sass 和 Less 都不认这种&后接:is()的组合 - 注意：
#{}里不能放变量插值，#{':is(#{$list}, p)'}会导致 Sass 提前求值出错
真正难调试的不是语法红标，是编译后 CSS 里那个多出来的空格、那层没意识到的父路径、或是 :not() 被悄悄吃掉的括号——每次改完，务必打开 DevTools 查看最终生成的选择器，而不是只盯着 SCSS 缩进猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
