@extend 会让 css 拥肿因它复制选择器而非复用样式；应改用占位符 % 作继承锚点，避免布局属性和跨模块继承，且需权衡 @extend（合并选择器）与 @mixin（复制声明）的适用场景。
为什么 @extend 有时会让生成的 CSS 变得臃肿
直接用 @extend 普通类名（比如 .btn）会导致 SCSS 把所有引用它的选择器“合并”进被继承的选择器规则里。一旦多个组件都 @extend .btn，最终生成的 CSS 中，.btn 的样式会重复出现在 .header-btn、.sidebar-btn、.modal-btn 等一堆地方——不是复用，是复制。
真正想复用的是样式声明本身，不是选择器链。这时候必须用占位符选择器 %，它不会输出到最终 CSS，只作为继承锚点。
-
%button-base不会出现在编译后的 CSS 里；.btn会 - 只有显式
@extend %button-base的选择器，才会把%button-base里的声明合并进去 - 如果忘了加
%，写成@extend button-base，SCSS 会报错：Undefined mixin or placeholder
怎么写一个可安全继承的占位符
占位符本质是“纯样式容器”，不绑定具体语义或 DOM 结构。它应该只包含可被多处复用的原子级声明，比如排版、间距、基础边框，而不是完整组件逻辑。
下面这个 %text-emphasis 是合理写法：
%text-emphasis {
font-weight: 600;
color: #2c3e50;
line-height: 1.4;
}
而下面这个就容易出问题：
%alert-text {
font-weight: 600;
color: #e74c3c;
margin-bottom: 0.5rem;
display: block;
}
-
margin-bottom和display属于布局行为，和语义强耦合，换场景很可能要覆盖 - 如果某个 alert 需要内联显示，就得写
display: inline !important—— 这就违背了继承的初衷 - 占位符里尽量避免
!important、position、float、具体margin/padding值
@extend 和 @mixin 到底该选哪个
二者根本不是替代关系：@extend 合并选择器，@mixin 复制声明。选谁取决于你是否需要「样式归属权转移」。
- 要用 BEM 或 CSS Modules 做作用域隔离？别用
@extend—— 它会强行把.card__title和.list__item-title的选择器合并，破坏命名空间 - 要让多个类共享同一套响应式断点逻辑？用
@mixin responsive-text更可控，每个调用点都是独立规则 - 想压缩最终 CSS 文件体积，且项目中大量类有相同基础样式（如所有
.icon-*都要display: inline-block; vertical-align: middle）？@extend %icon-base能减少重复声明行数 -
@extend不支持传参；@mixin支持。需要动态颜色/尺寸？只能选@mixin
编译后 CSS 选择器爆炸？检查继承链深度
SCSS 允许嵌套 @extend，比如 %a → %b → .c，但每层都会扩大最终选择器组合数量。一个 %reset 被 5 个占位符继承，而这 5 个又被 10 个真实类继承，最终可能生成上百行等效规则。
可以用 sass --watch 编译后打开 CSS 文件，搜索 , 出现频率最高的长选择器组，基本就是继承链过深的信号。
- 用
sass --style=expanded编译，比压缩模式更容易定位冗余选择器 - 避免跨模块继承：不要在
_buttons.scss里@extend %layout-helper（来自_layout.scss），改用@include layout-helper - 如果发现某占位符被超过 3 个不同语义模块继承，说明它可能已超出“原子样式”范畴，该拆或重构
占位符不是银弹，它解决的是“声明复用”，但代价是选择器不可控。真正难的不是怎么写 @extend，而是判断哪些样式值得用它“锁死”复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
