@extend总生成冗余选择器，因其合并选择器而非复制样式，导致嵌套、跨文件或含伪类/媒体查询时输出爆炸式选择器链；%placeholder可规避此问题，但需显式@use引用且不可用于响应式或伪类场景。
为什么@extend总生成冗余选择器
@extend不是复制样式，而是把所有调用它的选择器“合并”进被继承规则里。比如%btn-base被.btn-primary、.btn-danger、.modal .btn-close三处@extend，编译后就变成.btn-primary, .btn-danger, .modal .btn-close { … }——只要其中任意一个带父级上下文或嵌套路径，整个列表就会被拖入该上下文，导致.card .btn-primary, .card .btn-danger, .card .modal .btn-close这种爆炸式输出。
更麻烦的是：Dart Sass 7.0+ 默认禁用跨文件@extend，如果你在_buttons.scss里定义了%btn-base，却在_forms.scss里直接@extend %btn-base而没@use "buttons"，编译会静默失败或拼错路径，结果部分按钮没样式，你还以为是漏写了@extend，反而加更多继承补救。
用%placeholder替代.class-name做继承锚点
把@extend .btn改成@extend %btn-base，能立刻切断冗余输出风险。因为%placeholder本身不生成任何CSS，只作为继承入口存在；它不会污染HTML语义，也不会把.btn这个真实类名强行塞进所有扩展者的选择器链里。
-
%btn-base必须定义在所有@extend之前，否则报错：Invalid CSS after "": expected selector, was "}" - 跨文件引用时，必须显式
@use "path/to/buttons" as btn，再写@extend btn.%btn-base（Dart Sass ≥1.23.0） - 禁止在
@media或&:hover块内定义%placeholder——一旦被多处@extend，Sass会把媒体查询或伪类原样拼进所有调用处，产出.btn:hover, .card .btn:hover, .modal .btn:hover这类失控组合
哪些场景绝对不该用@extend
不是所有复用都适合@extend。它只对「无上下文依赖、无状态、纯视觉功能」的规则安全，比如%visually-hidden或%sr-only。以下情况一律绕开：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 工具类如
.text-center、.mt-4：跨模块@extend后生成.header .text-center, .sidebar .text-center, .modal .text-center，体积比单独三行.text-center { text-align: center; }还大 - 含伪类或响应式修饰的规则：
%btn-hover { &:hover { color: blue; } }被多个组件@extend，等于强制所有按钮都有:hover，无法按需关闭 - 依赖父级结构的规则：
.card > .title被@extend，结果生成.card > .title, .alert > .title, .modal > .title，但.alert > .title可能根本不存在DOM结构 - 嵌套内部使用：
.card { .header { @extend %text-sm; } }→ 输出.card .header, .card .title, .alert .header，父路径.card被错误复用到无关组件
真正压体积的替代方案：CSS自定义属性 + 单一声明源
别指望@extend压缩体积。真正可控的复用是把值抽成var(--color-primary)、var(--space-md)，在CSS里直接用：
:root { --color-primary: #007bff; --space-md: 1rem; }.btn { color: var(--color-primary); margin: var(--space-md); }.card { padding: var(--space-md); }
这样无论多少地方用var(--space-md)，最终CSS里只有一份--space-md声明，gzip压缩效率极高。注意两点：
- 变量命名统一前缀，如
--color-、--space-、--radius-，避免和第三方库冲突 -
@keyframes或@media内部不能用var()，这些场景仍得用原生Sass变量（如$breakpoint-md）
复杂点在于：CSS变量无法替代Sass函数（如lighten($color, 10%)），所以颜色变体、计算间距等逻辑还得保留在Sass层，只把最终确定的值透出为var()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
