@extend导致CSS体积暴增的根本原因是编译前复制选择器链而非复用样式声明，使嵌套、媒体查询、伪类等被强制拼接进所有继承者规则中，造成冗余选择器爆炸式增长。
为什么@extend会让CSS体积暴增
根本原因不是Sass编译器没压缩，而是@extend在编译前就“复制选择器链”，而不是复用样式声明。它把所有继承它的选择器，原封不动拼进被继承目标的规则里——哪怕那个目标本身带嵌套、媒体查询或伪类。
常见错误现象：
-
@extend .u-text-center，但.u-text-center实际来自.utility .text-center，结果生成.card .utility .text-center这种冗余路径 -
.modal { %flex-center { ... } }再被@extend %flex-center，输出变成.modal .btn, .modal .toast-body { ... } - 多个组件同时
@extend %button-base，而%button-base含&:hover，结果所有继承者都强制带上:hover变体，无法按需关闭
哪些@extend写法必然导致体积失控
不是所有@extend都危险，但以下模式几乎一定让CSS膨胀：
- 在嵌套块内定义%占位符：
.card { %base { ... } }→ 继承时自动带.card前缀 - 跨文件使用
%placeholder但没用@use显式引入，Dart Sass 7.0+会静默失败或路径错乱，开发者误加更多@extend补救 - 继承目标本身含
@media或&:hover，比如%btn-hover { &:hover { color: red; } }→ 所有调用处都获得hover规则 - 用具名类（如
.clearfix）而非%clearfix作继承目标：既多出一条无用规则，又让所有继承者被卷入同一选择器列表
真正有效的体积控制方案
必须放弃“全量引入+随意继承”的惯性，转向“最小依赖+占位符隔离+构建层清理”三步走：
立即学习“前端免费学习笔记（深入）”；
- 新建
src/custom-bootstrap.scss，只@import明确需要的部分：@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/mixins"→ 按需加grid、buttons等 - 所有基础样式统一用
%placeholder（如%text-center），禁用普通类名继承；确保%定义在@extend之前，且不嵌套、不含@media - Webpack/Vite项目中，确认Sass输出进了PostCSS管道，否则
cssnano和PurgeCSS根本没机会工作；grep -o "\.btn" main.css | wc -l超过200条，大概率是@extend失控了
验证是否已踩坑的关键动作
别只看SCSS源码是否“简洁”，重点检查编译后的真实输出：
- 运行
sass --watch --style expanded，直接看生成的CSS里有没有.header .btn, .sidebar .btn, .modal .btn这类重复长链 - 在DevTools里点开一个元素，看某条样式是否来自几十行外、完全不相关的文件——这是继承链断裂或跨文件引用失败的典型信号
- 执行
grep -o "margin:" main.css | wc -l，如果接近1000，说明_spacing.scss被全量引入，工具类爆炸式生成
最易被忽略的是：@extend不会提升选择器权重，也不会过滤伪类或媒体查询。你以为复用了样式，其实只是把一堆选择器硬塞进同一条规则里——体积、解析性能、维护性，全在线下悄悄恶化。
