占位符 % 是纯抽象选择器，仅用于 @extend 注入，自身不生成 CSS 规则；必须搭配 @extend 使用，不可直接渲染或在 HTML 中调用，调试时可临时改为类名。
占位符 % 不是选择器，不能直接渲染
很多人写完 %button-base 就以为能看见效果，结果浏览器里啥都不显示。因为 % 是纯抽象占位符，只在 @extend 时被“注入”到目标选择器里，自己从不生成 CSS 规则。
常见错误现象：%icon 单独定义后没被任何 @extend 调用，最终编译结果里完全消失；或者误把它当类名写在 HTML 的 class 属性里，导致样式失效。
- 必须搭配
@extend %xxx使用，且只能在选择器内部调用（不能在 mixin 或函数里） - 如果想调试占位符内容，临时改成
.debug-button-base看效果，确认无误后再换回% - 嵌套规则中不能直接
@extend %xxx，需先解包到顶层选择器再继承
@extend 合并属性时会扁平化层级，丢失嵌套语义
Sass 编译时把所有 @extend 的声明“复制粘贴”进目标选择器，不保留原始嵌套结构。比如 %flex-center 里写了 & > div，被 @extend 后，& > div 会变成独立规则，脱离原上下文。
使用场景：适合抽离通用原子样式（如 %clearfix、%sr-only），不适合含复杂父子/兄弟关系的模块样式。
立即学习“前端免费学习笔记（深入）”；
- 含
&:hover、&::before的占位符可正常继承，但伪类/伪元素会和宿主选择器拼接，注意生成的选择器是否符合预期 - 多个
@extend同一占位符时，Sass 会合并为一个规则块，但顺序按源码位置，不是按字母或权重 - 若占位符里用了
composes（CSS Modules）或var(--x)，编译后变量不会被解析，得靠运行时处理
和 @mixin 的关键区别：是否共享选择器
@extend 让多个选择器共用同一份 CSS 声明，最终 CSS 文件体积小；@mixin 每次调用都复制一份样式，体积略大但更灵活。
性能影响：大量 @extend 可能导致选择器爆炸（如 .a, .b, .c, .d, .e {@extend %base} 编译后生成超长逗号分隔列表），尤其在老版 IE 下有选择器长度限制（4095 字符）。
- 需要动态参数（如
$color,$size）？必须用@mixin，%不支持传参 - 要复用带媒体查询的样式？
@mixin可包裹@media，@extend无法跨媒体查询边界继承 - 第三方库（如 Bootstrap）大量用
%，但自定义代码里混用@extend和@mixin容易混乱，建议统一策略
编译后 CSS 选择器权重可能意外升高
@extend 不是简单复制属性，而是重写选择器链。比如 .btn {@extend %base} 和 .btn-primary {@extend %base}，编译后可能生成 .btn, .btn-primary { ... } —— 看似正常，但如果 %base 本身是 %base:hover，就会变成 .btn:hover, .btn-primary:hover，权重比单写 .btn:hover 高不了，但逻辑上容易误判。
容易踩的坑：用 @extend 继承高权重选择器（如 #header .nav li a）会导致目标选择器也带上冗余 ID 或多层嵌套，破坏 BEM 或原子 CSS 原则。
- 检查编译后 CSS，用浏览器开发者工具看实际生效的选择器，别只信源码
- 避免
@extend跨命名空间继承，比如从.legacy-xxx继承到.mod-xxx，后期解耦困难 - Webpack + sass-loader 默认开启
style模式，若启用indentedSyntax（.sass 文件），%语法仍有效，但缩进错误会导致静默失败
真正难的是权衡：什么时候该用 % 抽离，什么时候该用 @mixin 封装，或者干脆写普通 class —— 没有银弹，只有具体场景下的取舍。
