%placeholder不会出现在编译后的CSS中，因其本质是编译期模板，仅在@extend调用时将声明注入目标选择器，自身零输出；未被调用则彻底消失。
直接用 %placeholder 替代普通类名做 @extend 锚点，能彻底避免占位符自身输出到 CSS 中——这是减少类名数量最确定、最无副作用的方式。
为什么 %reset 不会出现在编译后的 CSS 里
占位符选择器本质是“编译期模板”，不是真实选择器。它只在被 @extend 调用时，把内部声明“注入”到调用者规则中，自身零输出。
- 写
%reset { margin: 0; padding: 0; }，不加@extend，编译后完全消失 - 写
.btn { @extend %reset; color: blue; }，最终只有.btn { margin: 0; padding: 0; color: blue; } - 如果误写成
@extend .reset（没加%），Sass 会报错Extending unknown pseudo-class ".reset"或直接复制整个.reset规则链，反而增加类名
@extend %xxx 跨文件失效的真正原因和解法
报错 Extending unknown pseudo-class "%reset" 不是语法错，而是作用域没打通。
-
%必须定义在顶层（不能嵌套在.card { }或@media里） - 仅靠
@import已过时；必须用@use "base" as *才能让%reset直接可用 - 若用
@use "base"，则必须写@extend base.%reset，不能省略命名空间 - 禁止循环依赖：
_a.scss@use "_b"，_b.scss就不能再@use "_a"
哪些场景下 % 反而让 CSS 更臃肿
不是所有 @extend 都省体积，关键看选择器结构是否扁平。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 嵌套层级深：比如
.modal .content %base，再被.alert@extend %base，会生成.modal .content .alert这种冗余组合选择器 - 多个不同上下文类同时 extend 同一占位符：如
article h1和aside h2都@extend %heading，Sass 会合并为article h1, aside h2 { ... }，但若它们原本就带复杂父级，输出仍膨胀 - 含
&:hover的占位符可继承，但生成的选择器是.btn:hover，没问题；若占位符里写了& > span，@extend后会变成独立规则.btn > span，脱离原意
% 和 @mixin 别混用的硬分界
复用目标不同，选型就不同——没有“更好”，只有“更对”。
- 要合并选择器、共享层叠权重、压缩后共用一条规则 → 用
%+@extend - 要传参（如
$size）、条件分支、或在@media块内调用 → 只能用@mixin+@include -
%icon不能写成%icon-#{$size}，Sass 不支持动态占位符名；此时必须切到@mixin icon($size) - 调试时想临时看效果？把
%debug改成.debug，验证完再换回%
真正容易被忽略的是：% 从不参与浏览器渲染流程——查 DOM 找不到它，DevTools 里看不到它，它只活在 Sass 编译器的 AST 里。这种“存在即不可见”的特性，才是它能精准控制输出体积的根本前提。
