@extend 是选择器合并而非复制粘贴，仅适用于无上下文依赖的纯辅助类（如 .sr-only、%clearfix）；滥用会导致选择器爆炸、优先级错乱和跨文件失效。
为什么 @extend 不是“复制粘贴”的替代品
直接用 @extend 复用类名，结果生成的 CSS 体积反而更大、选择器嵌套过深、甚至破坏原有样式优先级——这不是 @extend 不好，是你把它当成了 @mixin 的快捷写法。
它本质是「选择器合并」：把所有引用 @extend 的选择器，合并到被继承的选择器后面，共用同一份声明块。所以它只适合语义明确、不带上下文依赖的“纯样式抽象”。
- 别对
.btn-primary这种带业务语义的类用@extend；它可能在不同组件里需要不同表现，强行合并会互相干扰 - 避免跨模块
@extend，比如在_header.scss里@extend .clearfix，而.clearfix定义在_utils.scss—— 构建时顺序一错就失效 -
@extend不能传参，也不支持条件逻辑，想改颜色/间距？得另写一个类，再@extend它
什么情况下该用 @extend，而不是 @mixin
核心判断标准：这个样式是否「永远和某个语义类绑定」，且「不会单独存在」。
典型例子是辅助类（helper classes）：如 .sr-only、.visually-hidden、.clearfix、.text-truncate。它们本身不表达业务含义，只是解决特定渲染问题，且几乎从不单独使用。
- ✅ 推荐：
.search-input { @extend .text-truncate; }—— 输入框需要截断文本，这是它的渲染需求，不是可选效果 - ❌ 避免：
.card-title { @extend .font-bold; }—— 加粗是视觉风格，未来卡片标题可能要中等粗细，这时就得改源文件或加新类 - ⚠️ 注意：
@extend后生成的选择器顺序受文件引入顺序影响，Sass 会把扩展后的选择器放到被扩展规则的下方，可能覆盖你本意要保留的样式
@extend 导致选择器爆炸怎么办
当你看到编译后 CSS 出现类似 .a, .b, .c, .d, .e, .f, .g .h, .i + .j 这种超长选择器链，说明多个地方 @extend 了同一个基类，Sass 把所有引用者全塞进去了。
这不仅增大 CSS 体积，还可能触发浏览器选择器匹配性能瓶颈（尤其在旧版 Safari 和 IE 中）。
- 用
%placeholder替代具名类：把.clearfix改成%clearfix，再@extend %clearfix—— 占位符不会输出 CSS，只用于继承，能有效控制输出粒度 - 限制继承层级：不要让 A
@extendB，B 又@extendC。Sass 会把三层全展开，变成 A,B,C 共享一套声明，但选择器链翻倍 - 检查 sourcemap 或编译输出，定位哪些文件在反复
@extend同一个东西；高频复用的应抽成@mixin+ 显式调用，更可控
Sass 7.0+ 中 @extend 的兼容性陷阱
新版 Dart Sass（v7.0+）默认禁用了跨文件 @extend，除非被扩展的目标用 @forward 显式导出，否则编译报错："The target selector was not found"。
这不是 bug，是设计上收紧作用域，防止隐式依赖。但老项目升级后常在这里卡住。
- 确保被
@extend的占位符（如%reset-list）定义在@forward的模块里，且导出时加as *或显式列出 - 别在
@use后用namespace.placeholder形式去@extend——@extend不支持命名空间语法，只能用裸名或%name - 如果必须跨文件继承，优先考虑改用
@mixin，或者把公共占位符集中到_base.scss并最早@use
真正难处理的不是语法，而是团队里有人写了 @extend .grid-col-6 这种带栅格语义的类——它看着像工具类，实则绑死了布局结构。这种“伪抽象”比重复代码更难维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
