SCSS变量无法动态控制animation-play-state，因其仅在编译时生效；应改用CSS自定义属性（如--animation-play-state）配合JS或伪类切换，SCSS仅负责生成含变量的动画基础规则。
SCSS变量不能直接控制animation-play-state的运行时切换
SCSS是编译时预处理器，所有
在CSS输出时已固化为静态值，无法响应用户点击、悬停或JS状态变化。试图用
定义后直接写
，只会生成固定的一行CSS，毫无动态性。
真正可行的路径是：用SCSS管理**可复用的样式结构**，把动态控制权交给CSS自定义属性（
）或JS，SCSS只负责生成干净、可维护的底层规则。
用SCSS生成带CSS变量的动画基础类
把
从硬编码抽离，改由CSS变量注入，SCSS只做“模板生成”：
定义一个SCSS mixin，封装动画声明，但把播放状态留给
在class中统一应用该mixin，并默认设
避免重复写
和冗余属性，靠SCSS循环或参数化生成多套抖动/旋转动画
示例：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
这样编译后是标准CSS，且保留了JS或
修改
的能力。
配合JS切换CSS变量比直接操作style更灵活
直接改
会覆盖内联样式，而用CSS变量只需更新
，不破坏其他内联样式，也方便批量控制（比如父容器设变量，子元素继承）。
SCSS里可预设常用状态类，如
，供JS切换
若用React/Vue，直接绑定
，SCSS无需参与逻辑
注意：CSS变量有继承性，但
本身不继承——所以必须确保变量被用在动画元素自身上，而非父级
容易忽略的兼容性与重置陷阱
SCSS生成的代码再漂亮，也绕不开浏览器对
的实际行为限制：
单次动画（
）结束后，设
不会重播；必须重置
属性（例如先设
再恢复）
负
在不同浏览器对“起始帧”的解析不一致，别指望SCSS算出精确的
暂停点
用
检查当前是否有活跃动画实例，比盲目设变量更可靠——SCSS管不了这个，但JS层必须做
真正难的不是怎么写SCSS，而是判断动画此刻是否“活着”。变量只是开关，状态感知还得靠JS runtime。
$variable$play-state: "running"animation-play-state: $play-state--varanimation-play-state--animation-play-state--animation-play-state: running@keyframes@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;
}
:hover--animation-play-stateel.style.animationPlayState = 'paused'el.style.setProperty('--animation-play-state', 'paused').anim-paused { --animation-play-state: paused; }classNamestyle={{ '--animation-play-state': state }}animation-play-stateanimation-play-stateanimation-iteration-count: 1--animation-play-state: runninganimationnoneanimation-delay60%getAnimations()