scss变量仅在编译时生效，无法动态改变animation-duration或transition-timing-function；应通过css自定义属性配合js实现运行时控制。
SCSS变量不能直接改animation-duration或transition-timing-function的运行时值
SCSS变量在编译阶段就固化为静态CSS，比如$duration: 0.3s最终输出animation-duration: 0.3s，它不会响应JS切换、伪类状态或媒体查询中的动态变化。你看到的“动画变慢了”，其实是重新编译后生成了新CSS，不是运行时生效。
这意味着：
- @keyframes内部不能用$duration插值控制关键帧节奏（如10% { transform: translateX(50px); animation-duration: $duration; } ❌）
- transition-timing-function也不能靠变量“切换”缓动曲线，比如悬停时从ease切到cubic-bezier(0.2, 0.8, 0.4, 1)，必须靠CSS类或JS切换整条规则
用$duration和$easing变量统一管理动画节奏，但只用于编译期配置
真正该用SCSS变量的地方，是定义项目级标准档位，并在所有@include或属性声明中复用它们。这样改一处，全项目同步更新。
推荐做法：
- 在全局变量文件（如_variables.scss）里定义：$duration-fast: 0.18s;$duration-normal: 0.3s;$duration-slow: 0.45s;$easing-standard: ease-out;$easing-interactive: cubic-bezier(0.2, 0.8, 0.4, 1);
- 所有组件过渡/动画都显式引用这些变量，而不是硬写0.3s或ease
- 避免在组件SCSS里重定义同名变量，防止覆盖或冲突
@mixin封装动画时，把$duration和$easing设为可选参数
单纯用变量还不够灵活——按钮要快，模态框要稳，同一套动画逻辑得支持不同节奏。这时候@mixin比纯变量更实用。
示例（不生成重复@keyframes）：
@mixin animate-slide-in($duration: $duration-normal, $easing: $easing-standard, $delay: 0s) {
animation: slide-in $duration $easing $delay forwards;
}
<p>@keyframes slide-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}</p>
调用时：
- .btn { @include animate-slide-in($duration: $duration-fast); }
- .modal { @include animate-slide-in($duration: $duration-slow, $easing: $easing-standard); }
注意：
- @keyframes名必须唯一，Sass每次@include都会生成一份（哪怕参数相同），所以高频动画建议拆成独立@keyframes + 单独@mixin anim-use()
- 不要把$easing塞进@keyframes体里——缓动函数只作用于animation声明层，关键帧内无效
别让transition: all和animation-duration互相干扰
一个常见混乱点：同时写了transition: all 0.3s和animation: spin 2s infinite，结果发现旋转卡顿、过渡不生效。这是因为transition和animation会竞争对同一属性（如transform）的控制权。
解决思路：
- 显式列出需要过渡的属性，避开animation正在驱动的那些，例如：transition: color $duration-fast, opacity $duration-fast;
- 如果元素既有交互过渡又有循环动画，优先用transform和opacity做动画（GPU加速），其他属性（如width、background-color）留给transition
- 检查浏览器开发者工具的“Animations”面板，确认animation-duration是否被意外覆盖（比如媒体查询里又写了一次animation: ... 1s）
最易被忽略的一点：SCSS变量管不到运行时，但CSS自定义属性（--duration）可以。如果真需要点击暂停动画、悬停加速，得把animation-play-state和animation-duration交给--var + JS 控制，SCSS只负责生成带变量注入的基础规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
