%placeholder不能直接编译为css类，因其仅为sass抽象占位符，不生成输出，仅当被@extend调用时才将声明注入目标选择器；未被引用则被编译器静默丢弃，且不支持参数、跨嵌套作用域或模块间默认共享。
为什么 %placeholder 不能直接被编译成 CSS 类？
因为 %placeholder 是 Sass 的纯抽象占位符，它不生成任何输出，除非被 @extend 显式调用。很多人写完 %reset 就以为能像 .reset 那样在 HTML 里用，结果发现样式完全没生效——这是最常踩的坑。
-
%placeholder不会出现在最终 CSS 中，哪怕它定义了完整样式 - 只有被
@extend %placeholder的选择器，才会把占位符里的声明“合并”进去 - 如果整个文件里没有任何
@extend引用它，Sass 编译器会直接丢弃该占位符（连警告都没有）
@extend %placeholder 和 @extend .class 的关键区别
前者是“复制声明”，后者是“合并选择器”。这直接影响生成 CSS 的体积和可维护性。
-
@extend %placeholder：把占位符里的所有 CSS 声明，原样注入到目标选择器的规则块中，不新增选择器 -
@extend .class：把目标选择器追加到被继承类的选择器列表后，比如.btn继承.base，可能生成.base, .btn { ... } - 用
%placeholder可避免选择器膨胀，适合做底层复用（如重置、工具类），但无法通过 JS 查询或手动添加 class
嵌套中使用 %placeholder 的陷阱
在嵌套规则里 @extend %placeholder，容易误以为会继承父级上下文，其实不会——%placeholder 的样式始终以它定义时的作用域为准。
- 不能跨嵌套层级“捕获”父选择器，例如在
.card { .title {@extend %text-bold} }中，%text-bold不会自动带上.card前缀 - 如果占位符本身定义在嵌套内（比如
.theme-dark { %highlight { color: yellow; } }），它只在该作用域可见，外部无法引用 - 推荐把
%placeholder全部放在顶层（如_base.scss），避免作用域混乱
替代方案：什么时候该用 %placeholder，什么时候该用 @mixin？
核心判断标准是：是否需要动态参数。有参数就用 @mixin，纯静态复用才考虑 %placeholder。
立即学习“前端免费学习笔记（深入）”；
-
%placeholder更轻量，编译后无额外选择器，适合高频复用的固定样式集（如%clearfix、%sr-only） -
@mixin支持传参、条件逻辑、计算，比如@mixin responsive-font($size)，%placeholder完全做不到 - 别为了“少写一个
@include”硬套%placeholder——一旦你需要改一个地方的字体大小，就得拆成多个占位符，反而更难维护
真正容易被忽略的是：Sass 6.0+ 开始，%placeholder 在模块系统（@use）中默认不可见，必须显式用 @forward 暴露，否则引用会报错 Undefined placeholder selector "%xxx"。
