不能直接在scss顶层用@for或@each生成@keyframes，因css标准要求关键帧名必须是静态字符串，而scss仅允许在@mixin内通过#{}插值动态生成名称，否则编译报错；正确做法是将循环封装进@mixin并显式@include调用，以确保名称唯一、行为可控且符合模块化规范。
直接用 @for 或 @each 在 SCSS 中生成 @keyframes 是可行的，但必须包裹在 @mixin 里调用，否则编译会报错 —— 因为原生 CSS 不允许动态名称关键帧，而 SCSS 只能在 mixin 展开时做插值。
为什么不能直接在顶层用 @for 写 @keyframes
SCSS 编译器要求 @keyframes 名称必须是静态字符串，不接受变量或循环变量插值。比如下面这段会失败：
@for $i from 1 through 3 {
@keyframes slide-#{$i} {
0% { transform: translateX(0); }
100% { transform: translateX($i * 100px); }
}
}
错误信息类似：Invalid CSS after "...@keyframes slide": expected identifier, was "#{$i}"。根本原因是 CSS 标准不支持运行时关键帧名，SCSS 也未对此开放顶层插值。
- 只有
@mixin内部 +#{}插值 + 调用时传参，才能让每个动画获得唯一、可预测的名称 - 如果硬要在顶层生成多个关键帧，只能用固定命名（如
slide-1,slide-2），但失去参数化能力 - IE11 及更早浏览器不支持
@keyframes，若需降级，得额外提供opacity或visibilityfallback，不能依赖循环自动生成
用 @mixin + @for 安全生成带参数的关键帧
把循环逻辑收进 mixin，每次调用生成一组独立关键帧，名称和行为都可控。例如批量生成不同位移距离的滑入动画：
@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; }
}
}
}
<p>@include generate-slide-animations(4);</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
这样会输出 @keyframes slide-in-1 到 slide-in-4 四组规则，每组位移量递增。关键点：
- 必须用
@include显式调用，不能只声明 mixin -
$dist必须在循环体内定义，否则会被最后一次迭代覆盖 - 若需控制缓动曲线或时长，应把它们也作为 mixin 参数传入，而非写死在 keyframes 里
用 @each 生成语义化动画（如 loading 状态集）
当动画类型有明确业务含义（如 loading-small, loading-medium），用 @each 更易读和维护：
$loading-sizes: (
small: (dist: 80px, duration: 1.2s),
medium: (dist: 120px, duration: 1.6s),
large: (dist: 160px, duration: 2s)
);
<p>@each $name, $config in $loading-sizes {
@keyframes loading-#{$name} {
0% {
background-position: -#{$config.dist} 0, #{$config.dist} 0;
}
100% {
background-position: #{$config.dist} 0, -#{$config.dist} 0;
}
}
}</p>
这种写法适合骨架屏、状态指示器等需要多档配置的场景。注意：
-
@each遍历 map 时，$config是嵌套 map，必须用$config.dist访问字段 - 不要在
@keyframes内部再用@if判断 —— 浏览器不认条件关键帧，SCSS 也不支持在 keyframes 块内做逻辑分支 - 所有数值单位（如
px,s）必须显式写出，1.2不等于1.2s
性能与维护边界：别让循环生成失控
循环本身不增加运行时开销，但无节制生成关键帧会显著增大 CSS 体积，尤其当 $count > 10 或嵌套多层时：
- 每个
@keyframes规则都会被完整输出，哪怕只用其中 1 个，其余也会进生产包 - Chrome DevTools 的 Animations 面板会列出全部关键帧，干扰调试
- 动画名称冲突风险上升 —— 比如两个不同模块都调用
@include generate-slide-animations(5)，会重复生成相同名称 - 真正需要动态的是「行为」（如位移量、颜色偏移），不是「数量」；优先考虑用 1 个 keyframes + 多个
animation-duration/animation-delay控制节奏
最常被忽略的一点：循环生成的关键帧无法被 JavaScript 动态修改 —— 它们在编译期就固化为纯 CSS，后续只能靠 class 切换或 style.animationName 替换，不能实时重算参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
