%占位符是Sass中不输出的抽象样式容器，仅配合@extend使用时才生效；单独声明不生成CSS，不能嵌套、不可带伪类，也不支持@media内定义。
什么是%占位符，它真能减少CSS体积？
能，但只在配合@extend时生效；单独写%button-base不会生成任何CSS。它的本质是“不输出的抽象样式容器”，编译后完全消失，只有被@extend引用时，才把声明合并进目标选择器。
常见错误现象：%clearfix写了却没被@extend，结果编译后啥都没留下，开发者误以为“没生效”而去改用.clearfix——这反而增加了类名冗余和HTML耦合。
- 必须搭配
@extend使用，否则纯属无效代码 - 不能写成
%foo:hover这类带伪类的复合占位符（Sass报错） - 不支持嵌套：不能在
%modal里写&__header，得拆成独立占位符
@extend和@mixin到底该选哪个？
看复用目标：要继承选择器逻辑（比如让.btn-primary完全获得%btn-base的所有声明，并参与CSS层叠计算），选@extend；只要复用样式块（比如统一圆角、阴影），选@mixin。
关键区别在于输出结构：@extend会把多个选择器合并到同一CSS规则中（如.btn, .btn-primary { ... }），而@mixin是原样插入，可能重复生成相同声明。
立即学习“前端免费学习笔记（深入）”；
- 用
@extend时，所有被扩展的选择器共享同一份声明，压缩后体积更小 - 但
@extend无法传参，也不支持条件分支；需要动态值（如$size）必须用@mixin - 过度
@extend跨模块（比如%reset被10个组件extend）会导致CSS选择器爆炸，影响渲染性能
为什么%占位符不能写在@media里？
因为Sass规定占位符必须是顶层声明，@media块内属于嵌套上下文，此时写%sm-only会直接报错：Invalid CSS after "%sm-only": expected selector, was "{"。
正确做法是把响应式逻辑下沉到@mixin或拆解为独立占位符：
@mixin sm-only {
@media (max-width: 600px) {
@content;
}
}
// 或者
%sm-text {
font-size: 14px;
}
@media (max-width: 600px) {
.text-callout {
@extend %sm-text;
}
}
- 占位符本身不感知媒体查询，它的作用域仅限于常规CSS层
- 想实现“响应式继承”，只能先定义占位符，再在对应
@media块中@extend - 别试图用
@extend跨@media边界——Sass不支持，编译直接失败
压缩后体积真的变小了吗？要看具体怎么用
会变小，但前提是避免“伪继承”：比如给每个BEM元素都@extend %flex-center，结果生成.header__logo, .header__nav, .header__cta { display: flex; justify-content: center; }——表面看是一条规则，实际选择器长度翻了三倍，gzip后未必省字节。
- 真正省体积的场景：多个语义化类名共享同一组基础声明（如
%visually-hidden被.sr-only、.skip-link同时extend） - 警惕“过度合并”：Sass会把
@extend链路全部展开，%a→%b→%c最终可能产出超长选择器，浏览器解析更慢 - 上线前务必用
sass --style=compressed实测输出，别只信理论
最常被忽略的一点：%不解决选择器优先级问题。用@extend继承%danger后，如果另一个CSS文件里有.btn-danger { color: red !important; }，照样会被覆盖——占位符不改变权重计算规则。
