@extend不提升选择器权重，因为它仅合并选择器到同一声明块，不改变各自特异性；如.btn-primary权重为(0,1,0)，.my-button@extend后仍为(0,1,0)，无法覆盖#header .btn等高权重选择器。
为什么@extend不提升选择器权重
@extend只是把多个选择器合并进同一组声明块，它完全不改变每个选择器自身的特异性（specificity）。比如你写 .btn-primary 权重是 (0,1,0)，.my-button {@extend .btn-primary} 编译后就是 .btn-primary, .my-button —— 两个都是单类名，权重没变。一旦页面里有 #header .btn 这种 (0,2,0) 的选择器，.my-button 就压不住它，样式被覆盖却查不出原因。
嵌套中用&配合@extend会意外拉高权重
SCSS 的 & 不是拼字符串，而是展开父选择器完整路径。如果在 .card .header { @extend %text-center } 里调用，编译结果会是 .card .header, .card .title, .alert .header 这类带上下文的选择器，权重直接从 (0,0,1,0) 变成 (0,0,2,0) 甚至更高。更危险的是：.form .field { &:hover { @extend %error-state } } 会生成 .form .field:hover，权重 (0,0,1,2)，远超普通工具类。
继承复合选择器（如 .utility .text-center）导致语义错位
当你 @extend .utility .text-center，Sass 不会提取 .text-center，而是照搬整个路径。结果是 .btn .utility .text-center，而不是你想要的 .btn.text-center。这不仅让选择器变长、解析变慢，还强制依赖 DOM 结构——只要 HTML 里 .btn 不在 .utility 内部，样式就失效。浏览器 DevTools 里看到的“已应用但被覆盖”，往往就是这类选择器根本没匹配上。
链式@extend（A → B → C）在媒体查询中中断权重传递
如果 %reset 定义在顶层，.btn @extend %reset，.btn-lg @extend .btn，一切正常；但一旦把 .btn-lg 放进 @media 块里再 @extend .btn，Dart Sass 会报错或静默失败。开发者常误以为“继承没生效”，于是手动加 !important 或堆叠类名补救，反而让权重关系彻底失控。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是语法报错，而是编译后的 CSS 看似正常，却在特定 DOM 结构或加载顺序下才暴露优先级问题——这种延迟显现的权重错位，最难定位。
