@extend仅适用于语义一致、结构扁平的场景，如工具类或原子类；否则会导致选择器爆炸、体积增大。它合并选择器以减少CSS行数，但不支持参数、不提升权重、必须定义在引用前，且应优先用%占位符而非类名。
直接用 @extend 替代重复写类，但必须限定在语义一致、结构扁平的场景下；否则反而会把 CSS 选择器撑爆，体积不减反增。
什么时候该用 @extend 而不是 @mixin
当你有一组元素**必须完全共享同一套声明**，且它们在语义上属于同一类（比如所有按钮都该有 .btn 基础样式），@extend 才真正起作用。它把多个选择器合并进同一个 CSS 规则里，减少输出行数；而 @mixin 是复制粘贴式展开，每次调用都生成新块。
- 适合
@extend的：工具类（.t-center）、重置类（%reset）、原子类（.u-margin-top-sm） - 必须用
@mixin的：需要传参的（颜色、尺寸、断点）、嵌套在&:hover或@media里的、跨层级复用的逻辑 - 常见错误：在
.card .header里@extend .text-sm→ 编译后变成.card .header, .card .text-sm, .text-sm .header等一堆冗余组合
@extend 后选择器爆炸？检查目标类是否带 DOM 结构
Sass 的 @extend 是静态查找并拼接选择器，不是“提取样式”。如果你继承的是一个本身含多层结构的类（比如 .layout .sidebar .nav-item），所有引用它的地方都会被展开，最终生成超长选择器，甚至触发 IE 的选择器长度限制。
- 公共样式尽量定义为单类名：
%text-center或.t-center，别依赖.utility .text-center这种复合路径 - 只对顶层、已声明的占位符（
%reset）或真实类（.btn）使用@extend - 运行
sass --watch --style expanded查看编译后的真实 CSS，确认没意外生成.a .b .c, .x .y .z这类长链
为什么 @extend 没覆盖掉高权重样式？
@extend 不改变选择器权重。比如你 @extend .btn-primary，但目标规则只是 .btn（单类权重），继承后的选择器仍是单类，压不住 #header .btn 这种双权重要求。
立即学习“前端免费学习笔记（深入）”；
- 所有被
@extend的类或占位符，必须在继承语句之前定义（@use/@import顺序很重要） - 别指望它提升优先级——它只是复用声明，不是“升级”选择器
- 若需保证权重一致，手动补一个同级类：
.btn.btn-secondary，而不是只靠@extend %btn-secondary
最易被忽略的一点：@extend 的作用域是编译时静态绑定的，一旦模块加载顺序错乱（比如 B 文件先 @use 了 A 中定义的 %reset，但 A 在 B 之后才被 import），Sass 直接报错 "%reset is not a valid selector"，不会降级或警告。
