传参本身不提升复用率，能动态控制行为的参数设计才真正提升复用率；只传animation值是假复用，因丧失关键帧控制权，无法共享逻辑；正确做法是用参数驱动@keyframes内部状态，并设合理默认值与类型。
传参本身不提升复用率，能动态控制行为的参数设计才真正提升复用率。 直接把整条 animation 值当参数传进去，看着省事，实际等于放弃关键帧控制权，反而降低可维护性。
为什么只传animation值是假复用
常见错误现象：@mixin anim($value) { animation: $value; } 调用时写 @include anim("fade-in 0.3s ease-out");，结果所有动画都得单独写 @keyframes fade-in，无法共享同一组关键帧逻辑。
本质问题在于：Sass 的 @keyframes 名称必须全局唯一，而纯字符串参数无法参与编译期计算，也无法驱动关键帧内部状态（如 transform: scale($scale)）。
正确做法是让参数直接影响样式生成逻辑，例如：
立即学习“前端免费学习笔记（深入）”；
@mixin animate-in($duration: 0.3s, $scale: 0.95) {
animation: in-anim $duration forwards;
@keyframes in-anim {
from { opacity: 0; transform: scale($scale); }
to { opacity: 1; transform: scale(1); }
}
}
- 参数
$scale参与关键帧定义，不是仅修饰最终声明 - 每个
@mixin定义专属@keyframes名（如in-anim），避免命名冲突 - 调用方只需关心“要什么效果”，不用操心关键帧怎么写
@mixin参数该设默认值吗？看它是否代表“最安全的常用行为”
默认值不是为了少打字，而是防止误用。乱设会掩盖配置缺失问题。
适合设默认值的情况：
-
$easing: ease-out—— 大多数入场动画确实该缓出，且比linear更安全 -
$radius: $radius-sm—— 读取已定义的变量，而非硬写4px，保证设计系统一致性
不该设默认值的情况：
-
$color—— 没有“通用安全色”，漏传会导致编译失败或意外继承 -
$breakpoint—— 断点属于上下文决策，混入不该预设（应由调用方在@media中控制）
参数类型也要对齐：写 $size: 1rem 比 $size: 16 更可靠，单位必须显式携带。
多个参数传错顺序怎么办？用 map 替代位置参数
当参数超过 3 个，尤其含布尔开关（如 $hover: true, $focus: false）时，按顺序传极易出错。
改用 map 更清晰：
@mixin card-base($config: ()) {
$padding: map-get($config, padding, $card-padding);
$shadow: map-get($config, shadow, $card-shadow);
$border-radius: map-get($config, radius, $card-border-radius);
padding: $padding;
box-shadow: $shadow;
border-radius: $border-radius;
}
// 调用
@include card-base((padding: 1.5rem, radius: 12px));
- 键名语义明确，顺序无关
- 未传的 key 自动 fallback 到变量或默认值
- 避免
@mixin button($bg, $text, $size, $rounded, $disabled)这类难维护签名
最容易被忽略的一点：参数名必须带单位、不能拼错 $ 符号、别在 @mixin 内部硬编码像素值——这些错误 Sass 编译器通常不报，但生成的 CSS 会静默失效，排查成本远高于写的时候多敲几个字符。
