%占位符编译后不生成独立css规则，仅通过@extend合并选择器；@mixin则原样复制样式块。%适用于完全静态、多选择器共享且无上下文依赖的场景，而@mixin支持参数与逻辑，二者不可混用。

占位符 %placeholder 和 @mixin 的输出本质不同

占位符编译后不生成独立 CSS 规则，只在 @extend 时合并选择器；@mixin 则是原样复制样式块。这意味着：用 %button-reset 被 12 个组件 @extend，最终只产出一组声明；而 @include button-reset 调用 12 次，就复制 12 份相同规则——体积翻倍、gzip 失效、DevTools 难定位。

什么时候必须用 % 占位符而不是 @mixin

满足以下全部条件时，% 是唯一合理选择：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 样式集合完全静态（不含参数、无逻辑分支）
• 多个选择器需共享同一组声明，且语义上属于“同一种基础状态”（如重置、截断、清除浮动）
• 该集合不依赖父级上下文（即不能含 &:hover 或 &__item 这类嵌套引用）
• 项目使用 Dart Sass（2026 年起已禁用非占位符的全局 @extend）

@extend %xxx 的三个硬性限制

违反任一条件都会导致编译失败或运行时异常：

• 被 extend 的目标必须以 % 开头，写成 .clearfix 或 .btn-base 会报错 Extend directives may only be used with silent classes (starting with %)
• 占位符内部禁止出现 & 符号（例如 %text-truncate { #{&}--sm { ... } } 不合法）
• 不能包含伪类或属性选择器（%disabled { &[disabled] { ... } } 或 %hoverable { &:hover { ... } } 均不可行）

Mixin 里调用 @extend 会怎样

语法允许，但属于反模式：

• @mixin btn-reset { @extend %button-reset; } 看似简洁，实则把占位符的“合并”语义锁死在 mixin 内部，调用方失去选择权
• 一旦该 mixin 被多处 @include，Dart Sass 仍会尝试对每个调用点分别 @extend，极易触发 Complex selector cannot be extended 错误
• 调试时无法区分是 mixin 本身出错，还是 @extend 目标缺失——错误堆栈指向 mixin 行号，而非实际 extend 位置

占位符不是“更高级的 mixin”，它是编译期选择器合并机制；它的价值只在多人协作、高频复用、且样式绝对静态的场景里才真正浮现。一旦涉及参数、条件或上下文感知，就得切回 @mixin ——混用二者边界，比全用 mixin 更难维护。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！