@extend导致CSS爆炸式膨胀，因其机械合并选择器而非复用样式：多个类继承同一占位符时，Sass穷举所有组合路径（如.btn, .card, .btn .card），且嵌套、跨文件或伪类调用会进一步拼接祖先链与状态，生成冗余、低效、难维护的长选择器。
为什么 @extend 生成的 CSS 会“爆炸式”膨胀？
因为 @extend 不是复制样式，而是把选择器“合并”进被继承的选择器列表里。一旦多个类 @extend 同一个占位符或基础类，Sass 就会穷举所有组合路径——比如 .btn、.card、.modal 都 @extend %clearfix，那最终 CSS 里就可能出现 .btn, .card, .modal, .btn .card, .card .btn, ... 这类无意义组合。
这不是 bug，是设计使然：Sass 假设你希望语义类之间能“互相影响”。但现实中多数场景只需要复用声明块，不需要选择器联动。
- 避免对非占位符选择器（如
.base）使用@extend，优先用%placeholder - 禁止跨模块
@extend—— 比如_layout.scss里的%grid-col被_components.scss中的.button继承，会拖慢编译且难以追踪 - 如果必须复用样式但不想产生组合选择器，改用
@mixin+@include
如何让 @extend 只生成扁平、可预测的选择器？
Sass 3.4+ 引入了 !optional 和更严格的占位符作用域控制，但真正起效的是写法约束：
- 只用
%开头的占位符（如%text-center），不用.class或#id - 每个占位符只定义一次，且放在独立的
_base.scss或_mixins.scss中 - 在
@extend后立刻加!optional（例如@extend %flex-center !optional），这样当占位符未定义时不会报错，也暗示它只是可选复用项，非强依赖 - 禁用嵌套上下文中的
@extend—— 比如不要在.card { @extend %shadow; }里写，而应提至顶层
示例：
%btn-base {
padding: 0.5rem 1rem;
border: none;
font-weight: 600;
}
.btn-primary {
@extend %btn-base;
background: #007bff;
}
.btn-secondary {
@extend %btn-base;
background: #6c757d;
}这样生成的 CSS 是两个独立选择器，不会出现 .btn-primary .btn-secondary。
@extend 和 @mixin 到底该选哪个？
看是否需要“选择器关系”：如果目标是让 .error 在 .form-group 内部时表现不同（比如 .form-group .error 加红边），那就必须用 @extend %error-state 并确保它出现在对应嵌套结构中；如果只是想复用几行声明（比如 display: flex），@mixin 更安全、更易调试。
立即学习“前端免费学习笔记（深入）”；
-
@extend适合语义分组：比如所有“禁用态”组件都应共享同一套视觉降权规则，且需保持选择器权重一致 -
@mixin适合行为封装：比如@mixin responsive-img插入max-width: 100%和height: auto，不改变选择器结构 - 混合使用常见错误：
@mixin里再@extend占位符 —— 这会导致每次@include都触发一次选择器合并，极易失控
如何检查 @extend 实际生成了什么 CSS？
别靠肉眼猜。启用 Sass 的 --trace 编译参数，或直接查看输出 CSS 文件中对应选择器的完整列表。更有效的是在编译前加一行调试：
@debug "Extending %icon-button from #{type-of(%icon-button)}";
如果看到 undefined，说明占位符没被引入；如果看到 string，说明它被当作文本而非占位符处理（常见于拼写错误或未用 % 前缀）。
另一个关键点：CSS 选择器权重由 @extend 生成的最长选择器决定。比如 .nav .nav-item @extend %active，那 %active 的样式会以 .nav .nav-item 权重注入，可能覆盖你预期的 .active 规则。这种隐式权重提升很难排查，所以复杂项目里尽量少用嵌套 + @extend 组合。
