直接@each嵌套遍历多维map生成关键帧名会报错，因sass要求@keyframes名称必须是静态标识符，不支持动态插值；应先用@function扁平化map再遍历，或用@mixin封装参数控制。
为什么直接 @each 嵌套遍历多维 Map 会生成错误的关键帧名
SCSS 编译器在顶层解析 @keyframes 时，要求动画名称必须是静态标识符（identifier），不接受变量插值或嵌套 map 的动态路径。比如你写：
@each $theme, $theme-map in $themes {<br> @each $state, $color in map-get($theme-map, "colors") {<br> @keyframes #{$theme}-#{$state}-fade { ... }<br> }<br>}——这看似合理，但若 $theme 是未加引号的 key（如 light 而非 "light"），Sass 会把它当变量查，报错 Undefined variable "light"；更关键的是，即使 key 是字符串，@keyframes 在顶层无法安全展开插值，容易触发 Invalid CSS after "@keyframes ...": expected identifier。
用 @function 提前扁平化多维 Map 再遍历
真正可控的做法，是把多维结构“压平”成一维键值对列表，再统一处理。例如你有一套主题+状态+动画类型三层配置：
$animations: (<br> "light": (<br> "colors": ("primary": #007bff, "success": #28a745),<br> "types": ("fade": (duration: 0.3s, easing: ease-in), "slide": (duration: 0.4s))<br> ),<br> "dark": (<br> "colors": ("primary": #60a5fa, "success": #4ade80),<br> "types": ("fade": (duration: 0.25s, easing: ease-out), "slide": (duration: 0.35s))<br> )<br>);先写一个 flatten-animations 函数提取所有组合：@function flatten-animations($map) {<br> $list: ();<br> @each $theme, $theme-data in $map {<br> @each $type, $type-conf in map-get($theme-data, "types") {<br> @each $color-key, $color-val in map-get($theme-data, "colors") {<br> $name: #{$theme}-#{$type}-#{$color-key};<br> $item: ($name: $name, theme: $theme, type: $type, color: $color-val, config: $type-conf);<br> $list: append($list, $item, comma);<br> }<br> }<br> }<br> @return $list;<br>}然后遍历这个扁平列表生成 @keyframes：$flat: flatten-animations($animations);<br>@each $item in $flat {<br> $name: map-get($item, "name");<br> $color: map-get($item, "color");<br> $conf: map-get($item, "config");<br> @keyframes #{$name} {<br> 0% { background-color: $color; opacity: 0.3; }<br> 100% { background-color: $color; opacity: 1; }<br> }<br>}这样每个动画名都是编译期确定的字符串，无风险。
@mixin 封装 + 多参数调用比纯遍历更安全
如果你的动画逻辑本身有强语义（比如“深色主题下 success 状态的 fade 入场”），硬靠遍历拼名字容易歧义、难调试。更推荐把组合逻辑收进 @mixin，由使用者显式传参控制：
@mixin animate-theme-state($theme: "light", $state: "primary", $type: "fade", $duration: 0.3s) {<br> $colors: map-get(map-get($animations, $theme), "colors");<br> $color: map-get($colors, $state);<br> $name: #{$theme}-#{$type}-#{$state};<br> @keyframes #{$name} {<br> 0% { background-color: rgba($color, 0.2); }<br> 100% { background-color: $color; }<br> }<br> .anim-#{$name} { animation: #{$name} $duration; }<br>}再按需调用：@include animate-theme-state("dark", "success", "fade", 0.25s);<br>@include animate-theme-state("light", "primary", "slide", 0.4s);好处是：命名清晰、可单独复用、避免遍历遗漏、支持默认值兜底，且所有插值都在 @mixin 展开时发生，完全符合 Sass 编译规则。
生成后如何避免关键帧名冲突和体积膨胀
批量生成动画名时，最容易忽略两点：一是多个 @keyframes 同名会静默覆盖（后定义的生效），二是无节制生成会导致 CSS 体积失控。应对方式包括：
- 动画名强制加前缀，如
theme-#{$theme}-#{$type}-#{$state}，避免和项目其他动画冲突 - 用
@if map-has-key($animations, $theme)做存在性校验，防止空 map 导致map-get()返回null报错 - 对重复使用的动画参数（如相同
duration和easing）合并生成同一组@keyframes，再通过不同 class 绑定，而不是每种组合都产出新规则 - IE11 不支持
@keyframes，若需兼容，不要指望循环自动生成 fallback，得手动为关键动画补充opacity或visibility过渡规则
@each，但 Sass 编译器只认规则。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
