@extend本质是选择器合并而非样式复用，它将所有调用处的选择器强行塞入被继承规则中，易导致冗余长链、跨媒体查询失效及模块隔离失控，应仅用于无上下文依赖的%占位符。
@extend 本质是选择器合并，不是样式复用
很多人以为 @extend 是把样式“复制”过去，实际它干的是把所有调用它的选择器，强行塞进被继承的选择器规则里。比如你写 %flex-center，然后在 .card-header、.modal-footer、.toast-body 三处 @extend %flex-center，Sass 编译后就变成：.card-header, .modal-footer, .toast-body { display: flex; justify-content: center; align-items: center; }——这本身没问题。但一旦 %flex-center 定义在嵌套结构里，比如 .layout { %flex-center { ... } }，Sass 就会忠实地把父级路径拼进去，生成 .layout .card-header, .layout .modal-footer 这类带冗余上下文的选择器。
嵌套、媒体查询、伪类会让选择器爆炸式增长
浏览器匹配 CSS 是从右往左的，.a .b .c .d .e 这种长链不仅体积大，解析也慢，旧版 Safari 和 IE 甚至有长度限制。以下情况会让问题更严重：
- 在嵌套规则里用
@extend：比如.card { .header { @extend %text-sm; } }→ 输出一堆带.card前缀的变体 - 跨媒体查询调用：
@media (min-width: 768px) { .btn { @extend .base-btn; } }→ Sass 必须把.base-btn的全部声明拷贝进媒体块，重复输出 - 继承目标含伪类：
%btn-hover { &:hover { color: blue; } }被多处@extend→ 所有继承者都带上:hover，且无法单独关闭 - 基类本身是复合选择器：
.utility .text-center被@extend→ 输出.card .utility .text-center，而不是预期的.card .text-center
模块隔离失效时，@extend 会静默失控
Dart Sass 7.0+ 默认模块隔离，@use 是显式依赖，@import 是文本拼接。如果 %placeholder 定义在 A 文件，B 文件没 @use 或 @import 它就直接调用 @extend，Sass 可能静默失败或拼错路径，构建时漏掉某些扩展，开发者误以为要加更多 @extend 补救，结果越补越乱。
验证是否失控不能只看 SCSS 源码是否“简洁”，得检查编译后的 CSS 输出和 DevTools 里的真实选择器行为：sass --style=compressed src/main.scss dist/main.css 后打开生成文件，搜 , （逗号）看有没有超长选择器链；再在浏览器里选中元素，看某条样式到底来自哪一行、哪个文件。
真正可控的替代方案不是不用，而是换锚点
@extend 本身不坏，坏的是用错了目标。关键区别在于：%placeholder 不输出任何 CSS，只作为继承锚点；而 @extend .btn 会把 .btn 这个真实类名拖进来，连带它的语义和潜在上下文污染。
- 只对「完全静态、无上下文依赖」的纯功能类用
%placeholder + @extend，比如%sr-only、%clearfix - 禁用带状态（
.btn:hover）、响应式（.md\:flex）、父级依赖（.card > .title）的规则做继承目标 - 改用
@mixin封装可配置逻辑，比如@mixin flex-center($direction: row)，避免选择器合并，也支持局部覆盖 - 工具类优先走 HTML 多类组合，比如
<div class="card-header d-flex justify-content-center">，而非 Sass 层继承 <p>复杂点不在语法，而在继承目标的语义边界——一个 <code>%flex-center放错位置，可能让十个组件的 CSS 都带上不该有的父级路径。
