直接 @extend .btn 会让 css 更臃肿，因为 .btn 作为普通类名会被原样输出，且所有继承处都会复制其伪类规则；而 %btn-base 不输出 css，仅作模板，@extend 后合并为扁平选择器。
为什么直接 @extend .btn 会让 CSS 更臃肿
因为 .btn 是普通类名，一旦定义就会原样输出到最终 CSS；而所有 @extend .btn 的地方，Sass 不仅合并选择器，还会把 .btn 自身那条空规则（或带伪类的规则）一起保留下来。比如你写了 .btn:hover，那么 .primary-btn:hover、.secondary-btn:hover 全都会被生成——哪怕你根本没在 HTML 里用过 .btn。
真正省体积的是 %btn-base：它不输出任何 CSS，只当“样式模板”；@extend %btn-base 后，Sass 把所有调用它的选择器归并成一条规则，例如 .primary-btn, .secondary-btn { display: inline-block; … }。
- 检查编译结果最直接：运行
sass --style=expanded input.scss:output.css，看输出里有没有孤立的.btn { }或爆炸式选择器链 - 占位符必须扁平命名，避免写成
.modal .content %base，否则继承时会生成.modal .content .alert这种冗长选择器 - 别在
@media块里定义%，否则外部@extend会报Extending unknown pseudo-class "%xxx"
跨文件使用 % 占位符必须显式引入
Dart Sass v7.0+ 默认禁止隐式跨文件 @extend。%reset-text 定义在 _base.scss 里，你在 _card.scss 中直接写 @extend %reset-text，必然报错。
正确做法只有两种：
-
@use "base" as *;→ 然后直接写@extend %reset-text -
@use "base";→ 然后写@extend base.%reset-text
注意：@use 必须出现在文件顶部，且不能循环依赖（A @use B，B 就不能再 @use A）；加 !optional 只是掩盖错误，不是解决方案。
哪些场景该立刻停用 %，改用 @mixin
% 只适合「完全静态、无参数、多处共用同一组声明」的场景。一旦需要动态控制，它就失效了：
- 要传颜色、尺寸、圆角值？→
@mixin button($variant: primary)才行，%button写死就卡死了 - 要嵌
@media做响应式字体？→%text-sm无法包含媒体查询，@mixin responsive-font才能放@media - 要用 BEM 或 CSS Modules 隔离作用域？→
@extend会强行合并.card__title和.list__item-title，破坏命名空间
简单判断：如果你在写占位符时忍不住想加 !important、具体 margin、position 或伪类，说明它已经越界了——该拆成 @mixin 或直接写类。
@extend % 在嵌套结构里不会自动穿透
这是最容易忽略的限制：@extend 只作用于当前选择器本身，不继承父级嵌套关系。
比如你写：
.card {
@extend %bordered;
&__header {
color: red;
}
}
结果只有 .card 获得 %bordered 的样式，.card__header 不会自动带上边框或背景。想让它也生效？得单独写：
.card__header { @extend %bordered; }
更麻烦的是，如果 %bordered 里含 &:hover，那 .card__header:hover 也会被生成——但你可能只想要 .card:hover。这种耦合一旦变深，维护成本远超收益。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
