用 $animation-duration 统一控制动画时长需在全局变量文件定义并显式引用避免覆盖复合属性transition 应单独用 $transition-durationSass 变量无兼容性问题无需 supports修改后须全量重编译。用 $animation-duration 统一控制所有动画时长直接改 CSS 里每个 animation-duration 值等于手动维护几十个散落的数字改漏一个就错位。Sass 的变量本质是编译期替换不是运行时逻辑所以必须确保所有动画规则都显式引用同一个变量。实操建议立即学习“前端免费学习笔记深入”在全局变量文件如 _variables.scss中定义$animation-duration: 0.3s;不写单位别省略分号所有动画规则里必须用 animation-duration: $animation-duration;不能写成 animation: fade-in $animation-duration ease; —— 后者会覆盖整个 animation 复合属性可能意外丢掉 animation-fill-mode 等关键项避免在 keyframes 内部用变量控制时间点比如 #{ $animation-duration * 0.5 }Sass 不支持动态计算关键帧偏移只认字面量百分比或 from/to区分「过渡」和「动画」别混用 $animation-duration 管 transition很多人把 transition 也塞进同一个变量结果 hover 动画和页面加载动画全被绑死在 0.3s —— 这违背交互直觉。CSS 中 transition 和 animation 是两套独立机制触发条件、控制粒度、浏览器优化路径都不同。实操建议立即学习“前端免费学习笔记深入”单独定义 $transition-duration: 0.2s;专用于 transition 相关属性按钮悬停、表单焦点这类微动效优先用 transition带路径、循环、多阶段的复杂动效才用 keyframes animation不要为了“统一”强行让 transition 复用 $animation-duration 变量语义错位会导致后期调整时不敢动变量反而增加认知负担兼容性兜底supports 不能替代变量降级看到有人写 supports (animation: name $animation-duration ease) { ... } 想做兼容判断这语法根本无效 —— supports 只能检测属性名或值是否被支持不能检测变量展开后的结果。老浏览器不支持 CSS 自定义属性但 Sass 编译后压根不生成 CSS 变量所以这不是运行时问题是编译逻辑误用。 蝉妈妈AI 电商人专属的AI营销助手