应在\_animations.scss中统一定义带前缀的@keyframes并封装为参数化@mixin，通过@use导入以避免全局污染和命名冲突，同时约束动画属性确保性能。
怎么在Sass里把动画抽成全局可复用的模块
直接用 @keyframes 写在每个组件文件里，很快会失控——改一个缓动函数得搜遍整个项目。正确做法是把所有动画逻辑收口到单独的 _animations.scss 文件里，用 @mixin 封装，按需注入。
- 所有
@keyframes定义统一放在_animations.scss，不带前缀（交给 Autoprefixer 处理） - 每个动画配一个同名
@mixin，比如@mixin fade-in，内部只写animation: fade-in 0.3s ease-out - 避免在 mixin 里硬编码时长或贝塞尔曲线——用参数接收，例如
@mixin slide-up($duration: 0.4s, $easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)) - 别忘了在入口
index.scss里@use 'animations' with ($prefix: 'my-')，方便后续加命名空间
为什么用 @use 而不是 @import 管理动画文件
@import 是全局污染式加载：一旦引入，所有 @keyframes 名和 @mixin 都直接挂到当前作用域，重名就报错；@use 则强制隔离，必须显式调用 animations.fade-in() 才能用，且支持别名和配置透传。
- 旧项目升级时，
@import 'animations'可能导致重复定义spin动画，浏览器只认第一个，后面覆盖失效 -
@use 'animations' as anim后，anim.fade-in()的调用路径清晰，重构时删文件不会误伤其他模块 - Sass 模块系统要求变量/函数/mixin 必须通过
@use显式暴露，_animations.scss里得写@forward 'core'或@export才能被外部访问
@keyframes 名冲突和 CSS 类名前缀怎么协同处理
动画名本身是 CSS 全局作用域，即使 Sass 文件被模块化，编译后 @keyframes bounce 仍是全局的。单纯靠文件拆分防不住冲突，得配合命名策略。
- 所有
@keyframes名强制加项目前缀，比如@keyframes my-bounce，别用bounce这类通用词 - 如果团队用 CSS-in-JS 或 Shadow DOM，动画名可以不加前缀，但 Sass 文件仍要保留
$prefix变量，方便未来切换 - 别试图用
@at-root把@keyframes提到 :root 下——它不解决命名冲突，反而让 source map 定位更难 - CI 流程里加一条检查：
grep -r '@keyframes [a-z]' src/ | grep -v 'my-' | wc -l，发现未加前缀立刻阻断合并
动画性能敏感场景下，Sass 层能做什么优化
Sass 本身不执行，但能帮你在编译期规避高成本属性。比如 animation: all 0.3s 会触发 layout + paint，而 transform 和 opacity 才是 GPU 友好的。
立即学习“前端免费学习笔记（深入）”；
- 在
_animations.scss里禁用含left/top/width的 mixin，只保留transform-based 的，例如slide-x用translateX而非left - 给关键动画 mixin 加
@warn提示：比如@if $property == 'background-color' { @warn 'Avoid animating background-color in performant mode'; } - 导出一份
performant-animations.scss，只包含fade、scale、rotate等安全组合，供 H5 活动页等性能敏感场景专用
@keyframes 名的命名一致性——有人写 my-fadeIn，有人写 my-fade-in，编译后变成两个动画，但 @mixin 调用时拼错一个字母就静默失败，连 warning 都没有。 
