%placeholder 编译体积更小，因不生成独立选择器且仅在@extend时合并；@mixin每次@include都复制样式，导致冗余。%placeholder不可传参，@mixin支持参数与逻辑，适用于动态样式。
%placeholder 编译出的 CSS 体积更小。
因为 %placeholder 完全不生成独立选择器，只在被 @extend 调用时才参与合并；而 @mixin 每次 @include 都会原样复制样式块，重复调用 = 重复代码。
占位符不生成未使用的选择器
只要没被 @extend，%placeholder 就不会出现在最终 CSS 中。比如：
%btn-base {
padding: 8px 16px;
border: 1px solid #ccc;
}
.btn-primary { @extend %btn-base; color: #007bff; }
/* .btn-secondary 没 extend %btn-base → %btn-base 不编译进 CSS */
最终 CSS 只有 .btn-primary 一条规则含基础样式，没有孤立的 %btn-base 或冗余选择器。
混合宏每次@include都复制一份
@mixin 是“文本插入”，不作去重。即使内容完全一样，多次 @include 就等于多次粘贴：
@mixin btn-base {
padding: 8px 16px;
border: 1px solid #ccc;
}
.btn-primary { @include btn-base; color: #007bff; }
.btn-secondary { @include btn-base; color: #6c757d; }
.btn-danger { @include btn-base; color: #dc3545; }
编译后 CSS 里这三条规则都会各自带一遍 padding 和 border 声明，无法合并。
- 如果只调用 2–3 次，体积差异微乎其微
- 但若在组件库或主题系统中高频复用（如 20+ 个按钮变体），
@mixin会导致 KB 级冗余 - 尤其含前缀（
-webkit-）或复杂声明时，膨胀更明显
占位符不能传参，混合宏能 —— 这是核心取舍点
你没法给 %placeholder 传 $radius 或 $color，它只能写死样式；而 @mixin 天然支持参数、默认值、条件逻辑：
- 需要动态控制圆角、阴影、尺寸 → 必须用
@mixin - 纯静态共用样式（如「清空浮动」「居中定位」「基础表单重置」）→
%placeholder更轻量 - 想兼顾体积和灵活性？可组合：用
%placeholder承载不变部分，@mixin包裹可变部分
真正容易被忽略的是：占位符的合并能力依赖选择器结构。比如 .card-header 和 article h1 同时 @extend %title，编译后会合并成 .card-header, article h1 —— 但如果其中某个选择器带伪类或属性选择器（如 .btn:hover），Sass 为保语义正确可能拒绝合并，反而生成多条独立规则。这种边界情况不常发生，但上线前建议检查生成 CSS 的实际结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
