SCSS变量无法动态控制animation-play-state，因其仅在编译时生效；应改用CSS自定义属性（如--animation-play-state）配合JS或伪类切换，SCSS仅负责生成含变量的动画基础规则。
SCSS变量不能直接控制animation-play-state的运行时切换
SCSS是编译时预处理器，所有$variable在CSS输出时已固化为静态值，无法响应用户点击、悬停或JS状态变化。试图用$play-state: "running"定义后直接写animation-play-state: $play-state，只会生成固定的一行CSS，毫无动态性。
真正可行的路径是：用SCSS管理**可复用的样式结构**，把动态控制权交给CSS自定义属性（--var）或JS，SCSS只负责生成干净、可维护的底层规则。
用SCSS生成带CSS变量的动画基础类
把animation-play-state从硬编码抽离，改由CSS变量注入，SCSS只做“模板生成”：
- 定义一个SCSS mixin，封装动画声明，但把播放状态留给
--animation-play-state - 在class中统一应用该mixin，并默认设
--animation-play-state: running - 避免重复写
@keyframes和冗余属性，靠SCSS循环或参数化生成多套抖动/旋转动画
示例：
立即学习“前端免费学习笔记（深入）”；
@mixin anim-control($name, $duration, $timing: ease) {
animation: #{$name} #{$duration} #{$timing} infinite;
animation-play-state: var(--animation-play-state, running);
}
.box {
@include anim-control(bounce, 1.5s);
--animation-play-state: running;
}
这样编译后是标准CSS，且保留了JS或:hover修改--animation-play-state的能力。
配合JS切换CSS变量比直接操作style更灵活
直接改el.style.animationPlayState = 'paused'会覆盖内联样式，而用CSS变量只需更新el.style.setProperty('--animation-play-state', 'paused')，不破坏其他内联样式，也方便批量控制（比如父容器设变量，子元素继承）。
- SCSS里可预设常用状态类，如
.anim-paused { --animation-play-state: paused; }，供JS切换className - 若用React/Vue，直接绑定
style={{ '--animation-play-state': state }}，SCSS无需参与逻辑 - 注意：CSS变量有继承性，但
animation-play-state本身不继承——所以必须确保变量被用在动画元素自身上，而非父级
容易忽略的兼容性与重置陷阱
SCSS生成的代码再漂亮，也绕不开浏览器对animation-play-state的实际行为限制：
- 单次动画（
animation-iteration-count: 1）结束后，设--animation-play-state: running不会重播；必须重置animation属性（例如先设none再恢复） - 负
animation-delay在不同浏览器对“起始帧”的解析不一致，别指望SCSS算出精确的60%暂停点 - 用
getAnimations()检查当前是否有活跃动画实例，比盲目设变量更可靠——SCSS管不了这个，但JS层必须做
真正难的不是怎么写SCSS，而是判断动画此刻是否“活着”。变量只是开关，状态感知还得靠JS runtime。
