@extend压缩后CSS反而变大，因其机械拼接选择器导致声明重复、组合爆炸，且cssnano无法合并不同规则块中的相同样式；应改用CSS自定义属性实现声明唯一化。
为什么@extend在压缩后反而让CSS变大
@extend 看似“复用样式”，但 Dart Sass 编译时只是机械地把被继承的选择器列表拼接到当前选择器后面，不判断是否重复、是否真实生效。比如 .btn-primary 和 .btn-danger 都 @extend %button-base，最终 CSS 里就会出现两套完全相同的 padding: 0.5rem 1rem; border-radius: 4px; 声明——不是共享一份，而是复制两份。
更糟的是，%placeholder 一旦被多个上下文引用，Sass 就会生成所有可能的组合选择器（如 .card .btn-primary、.modal .btn-primary），而这些组合很多根本不会出现在 HTML 中。
- 常见错误现象：
main.min.css里反复出现同一组声明，gzip -c main.min.css | wc -c对比发现体积没降反升 - 构建后检查输出 CSS，搜索
margin: 0.5rem或font-weight: 600，如果结果远多于你实际写的类数，基本就是@extend泛滥了 - 它和
cssnano不兼容：压缩工具无法合并来自不同选择器的相同声明，因为它们属于不同规则块
哪些场景下%placeholder + @extend还能用
只对「无上下文、无状态、纯视觉」的类才安全，比如屏幕阅读器隐藏、强制换行、文本截断这类全局通用行为。它们不依赖父级、不响应交互、不随主题变化。
- 能用的例子：
%sr-only、%truncate、%visually-hidden - 绝对不能用的例子：
%btn-hover（含:hover）、%md\:flex（含媒体查询）、%card-header（隐含.card > &结构） - 一个硬判断标准：把这个占位符单独写成真实类名（比如
.sr-only），直接加到 HTML 元素上，是否 100% 有效且无副作用？如果不是，就别用@extend
替代@extend的真正体积优化方案
真正减少体积，靠的是「声明唯一化」，而不是「选择器复用」。CSS 自定义属性才是现代 SCSS 工程的压缩主力。
立即学习“前端免费学习笔记（深入）”；
- 把间距、颜色、圆角等值统一定义在
_variables.scss里，例如：$space-sm: 0.5rem;→--space-sm: 0.5rem; - 所有组件用
margin: var(--space-sm)，最终 CSS 只有一处:root { --space-sm: 0.5rem; }，其余全是引用 - 构建时用
postcss-custom-properties回退旧浏览器，别指望 Sass 编译期解决兼容性 - 禁用
@extend后，用 BEM 命名 + 工具类组合（如flex items-center gap-2）代替嵌套逻辑，体积下降更稳定
如何验证你的优化真起效了
别信文件行数或本地开发未压缩的 CSS。上线包体积是否下降，只看三个数字：
- 执行
npx sass --no-source-map --style=compressed src/main.scss > dist/main.min.css生成真实产物 - 运行
gzip -c dist/main.min.css | wc -c得到传输体积 - Chrome DevTools → Network → 找到该 CSS 请求 → 对比
Transfer Size（真实下载量）和Resource Size（解压后大小），如果后者显著增大，说明你引入了冗余规则而非精简
最常被忽略的一点：占位符本身不会被删除，哪怕没被 @extend 引用过，它仍会出现在编译输出里——所以删掉不用的 %xxx，比怎么用它更重要。
