用 $animation-duration 统一控制动画时长需在全局变量文件定义并显式引用，避免覆盖复合属性；transition 应单独用 $transition-duration；sass 变量无兼容性问题，无需 @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 变量，所以这不是运行时问题，是编译逻辑误用。
实操建议：
- Sass 变量本身无兼容性问题，它在编译阶段就已转为纯 CSS，真正要兜底的是动画特性本身（比如 IE10 不支持
animation-timing-function: spring()） - 需要兼容旧浏览器时，用
@extend或@mixin封装带前缀的声明，例如：@include anim-fade-in($animation-duration);，内部自动输出-webkit-animation等 - 别在 Sass 里写
@supports去包裹变量引用，既无效又干扰编译流程
修改变量后务必全量重编译，别依赖 HMR 局部刷新
现代前端工具链（Vite、Webpack）的热更新常只监听文件内容变化，而 Sass 变量被多个文件 @import 时，改了 _variables.scss 却没触发依赖模块重编译，结果页面动画时长看起来“没变”—— 实际是缓存了旧 CSS。
实操建议：
- 改完
$animation-duration后，手动重启构建进程，或清空 node_modules/.cache - 在
@import链中，确保变量文件是第一个被引入的（如@import 'variables'; @import 'components/button';），否则后续文件可能读到未定义变量 - 如果项目用了 CSS-in-JS 或 Tailwind，Sass 变量对它们无效 —— 那些方案需要各自配套的配置方式，别指望一个
$animation-duration全局生效
变量本身很简单，难的是让每个用到它的地方都真正参与进来。最容易被忽略的，是组件库、第三方 UI 框架的样式是否真的接入了你的 Sass 变量体系——它们往往自带独立动画逻辑，一不留神就成了“一致性盲区”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
