根本原因是CSS标准要求@keyframes名称必须是静态字符串，浏览器解析时需确定名称，不支持编译期变量插值；正确做法是将循环封装进@mixin内再@include调用。
为什么不能在SCSS顶层用@for或@each生成@keyframes
直接写@for $i from 1 through 3 { @keyframes slide-#{$i} { ... } }会编译失败，报错类似Invalid CSS after "@keyframes slide-": expected identifier, was "#{$i}"。根本原因不是 Sass 限制严，而是 CSS 标准本身要求@keyframes名称必须是静态字符串——浏览器解析时就要能确定名称，不能依赖运行时或编译期变量插值。
所有试图在顶层（即不在@mixin内）拼接名称的行为都会失败，包括@each、@while、甚至%placeholder里写@keyframes也会语法报错。
正确做法：把循环封装进@mixin再@include调用
只有@mixin内部的#{$name}插值才被 SCSS 允许展开为合法的关键帧名。每次@include调用，都会生成一组独立、静态、可预测的@keyframes规则。
示例：批量生成不同位移距离的滑入动画
立即学习“前端免费学习笔记（深入）”；
@mixin generate-slide-animations($count: 3) {
@for $i from 1 through $count {
$dist: $i * 100px;
@keyframes slide-in-#{$i} {
0% { transform: translateX(-#{$dist}); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
}
}
@include generate-slide-animations(4);这会输出@keyframes slide-in-1到slide-in-4四组规则。注意：
-
$dist必须在@for体内定义，否则会被最后一次迭代覆盖 - 必须显式
@include调用，只声明@mixin不会产出任何 CSS - 若需控制缓动或时长，应把它们也作为
@mixin参数传入，而非硬编码
语义化命名优于数字编号：用@each代替@for
当动画有明确业务含义（如加载态），用@each更易读、可维护，也避免数字编号带来的歧义。
例如定义骨架屏三种速度档位：
@each $name, $duration in (slow: 2.2s, medium: 1.6s, fast: 1s) {
@keyframes skeleton-shine-#{$name} {
0% { background-position: -200% 50%; }
100% { background-position: 200% 50%; }
}
.skeleton-shine-#{$name} {
animation: skeleton-shine-#{$name} $duration ease-in-out infinite;
}
}关键点：
- 动画名如
skeleton-shine-slow比skeleton-shine-1更直观 - 背景位移值必须展开为静态数值，不能用
calc()或var(--x) - 重复引入同一段
@each代码会导致关键帧重复输出，体积膨胀
真正可复用的动画库结构：分离定义与调用
动态生成只是手段，不是目的。长期维护的项目应放弃“每个调用都生成新关键帧”的思路，改用固定名+参数化@mixin的分层结构。
在_animations.scss中：
@keyframes my-fade-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@mixin fade-in($duration: 0.3s, $easing: ease-out, $fill: forwards) {
animation: my-fade-in $duration $easing $fill;
}调用时只需@include fade-in(0.4s, cubic-bezier(0.2, 0.8, 0.4, 1));。这样做的好处：
- 关键帧名全局唯一、带项目前缀，杜绝冲突
- 所有动画只用
transform和opacity，保障 GPU 合成、不触发重排 - 时长、缓动等行为参数可变，关键帧逻辑不变，修改一处即全局生效
- IE11 fallback（如
visibility）可集中定义，无需每组动态规则都重复写
动态生成容易让人忽略一个事实：浏览器最终只认编译后的 CSS。与其在构建期拼命拼名字，不如让关键帧足够语义化、稳定、轻量——那才是动画库真正难维护的点。
