@include会生成重复CSS，因为每次调用都会完整复制mixin内容；而%占位符通过@extend自动合并相同规则，适合无参数静态片段，参数化mixin应仅用于逻辑不可合并的变体。
为什么@include会生成重复CSS
每次调用 @include，Sass 都会把整个 mixin 内容完整复制一遍，不合并、不 dedupe。比如定义一个 @mixin spacing($size)，在 12 个地方调用 @include spacing(16px)，最终 CSS 就会出现 12 份一模一样的 padding: 16px 块——哪怕值完全相同。
哪些场景最容易触发重复膨胀
常见高危模式包括：
- 全局复用类（如
@mixin reset-margin）被大量组件直接@include - 响应式断点 mixin 在每个组件里都写一遍
@media嵌套 - 颜色主题 mixin 被按钮、卡片、表单分别调用，且参数组合少、变体集中
- 使用
@each循环 +@include生成状态类（如.btn-primary:hover,.btn-success:hover），实际 hover 规则内容高度雷同
用占位符选择器 % 替代 @mixin 实现去重
当样式块本身不依赖参数、或参数组合有限时，% 占位符是更轻量的选择：它只声明规则，不立即输出，直到被 @extend 触发，且 Sass 会自动合并相同结构。
示例：
立即学习“前端免费学习笔记（深入）”；
@mixin btn-hover {
&:hover { background-color: #007bff; }
}
// → 每次@include都复制一份:hover规则
<p>%btn-hover {
&:hover { background-color: #007bff; }
}
.btn-primary { @extend %btn-hover; }
.btn-success { @extend %btn-hover; }
// → 编译后只有一份 &:hover { background-color: #007bff; }注意：% 不能传参，也不支持 @content，只适合静态、无变量的通用片段。
参数化 mixin 真正该用在哪
别用 mixin 去封装“所有组件都要的 padding”，而该用它生成「逻辑上不可合并」的变体：
- 尺寸缩放：
@mixin size-scale($scale)—— $scale 不同，生成的calc(14px * $scale)结果必然不同，无法合并 - 主题色衍生：
@mixin theme-button($color)—— 每种 $color 对应唯一背景/边框组合，必须独立输出 - 纹理背景：
@mixin textured-bg($texture-size)—— 尺寸不同，background-size值不同，CSS 层叠行为也不同
真正容易被忽略的是：重复不是 bug，而是你把 mixin 用在了它不该负责的地方——当多个调用产出完全相同的 CSS 字符串时，说明它已经退化成“带语法糖的复制粘贴”，此时该换 %、CSS 自定义属性，或重构为原子类系统。
