为什么Sass的@extend会生成大量CSS选择器

@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 甚至有长度限制。以下情况会让问题更严重：

1. 在嵌套规则里用 @extend：比如 .card { .header { @extend %text-sm; } } → 输出一堆带 .card 前缀的变体
2. 跨媒体查询调用：@media (min-width: 768px) { .btn { @extend .base-btn; } } → Sass 必须把 .base-btn 的全部声明拷贝进媒体块，重复输出
3. 继承目标含伪类：%btn-hover { &:hover { color: blue; } } 被多处 @extend → 所有继承者都带上 :hover，且无法单独关闭
4. 基类本身是复合选择器：.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 这个真实类名拖进来，连带它的语义和潜在上下文污染。

1. 只对「完全静态、无上下文依赖」的纯功能类用 %placeholder + @extend，比如 %sr-only、%clearfix
2. 禁用带状态（.btn:hover）、响应式（.md:flex）、父级依赖（.card > .title）的规则做继承目标
3. 改用 @mixin 封装可配置逻辑，比如 @mixin flex-center($direction: row)，避免选择器合并，也支持局部覆盖
4. 工具类优先走 HTML 多类组合，比如 <div class="card-header d-flex justify-content-center">，而非 Sass 层继承

复杂点不在语法，而在继承目标的语义边界——一个 %flex-center 放错位置，可能让十个组件的 CSS 都带上不该有的父级路径。