SCSS顶层不能用@each/@for生成@keyframes，因CSS要求动画名必须是静态字符串；须封装进@mixin并通过@include调用，确保输出合法、静态、可复用的关键帧规则。
不能在 SCSS 顶层用 @each 或 @for 直接生成 @keyframes，否则编译失败；必须把循环逻辑封装进 @mixin，再通过 @include 调用，才能产出合法、静态、可复用的关键帧规则。
为什么顶层循环生成 @keyframes 会报错
SCSS 编译器要求 @keyframes 名称必须是静态字符串，不接受任何变量插值（如 #{$name}）。哪怕你写的是 @each $name in (slow, fast) { @keyframes shine-#{$name} { ... } }，也会触发类似 Invalid CSS after "@keyframes shine-": expected identifier, was "#{$name}" 的错误。根本原因不是 Sass 限制太严，而是 CSS 标准本身禁止运行时解析关键帧名——浏览器需要在解析阶段就能索引到确定的动画名。
- 所有动态拼接名称的行为（包括
@while、@for、@each在顶层使用）都会失败 -
%placeholder不支持@keyframes，写进去直接报语法错误 -
@import多次引入含@keyframes的文件，会导致重复输出，体积膨胀
如何用 @mixin + @each 安全批量生成关键帧
把遍历逻辑收进 @mixin，调用时展开为独立、静态的 @keyframes 声明。这样既满足 CSS 规范，又保留参数化能力。
- 定义键值对列表，如
$speeds: (slow: 2s, medium: 1.5s, fast: 1s)，方便在关键帧内直接使用$duration - 关键帧名必须带项目前缀，如
my-skeleton-shine-slow，避免全局冲突 - 关键帧内部所有数值必须展开为静态值，不要用
calc()或 CSS 变量，否则动画节奏不可控 - 每个关键帧只声明一次，
@mixin调用位置应统一放在_animations.scss等入口文件中
@mixin generate-skeleton-shine($speeds: (slow: 2s, medium: 1.5s, fast: 1s)) {
@each $name, $duration in $speeds {
@keyframes my-skeleton-shine-#{$name} {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
}
}
@include generate-skeleton-shine;
为什么 @mixin 内定义 @keyframes 后不能多处 @include
@mixin 每次 @include 都会原样复制一份 @keyframes 到输出 CSS 中。哪怕两个组件都调用 @include skeleton-shine-slow，最终 CSS 里也会出现两段完全相同的 @keyframes my-skeleton-shine-slow { ... }。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 关键帧名无作用域，浏览器只认名字字符串，重复定义不会报错但浪费体积
- CSS 层叠机制不适用于
@keyframes，无法靠“后声明覆盖”去重 - 必须把
@keyframes定义和调用彻底分离：所有关键帧统一写在_animations.scss中，再通过@use导入 - 配套的
@mixin只控制animation属性值，如@mixin skeleton-shine-slow { animation: my-skeleton-shine-slow 2s ease-in-out forwards; }
关键帧内容必须手动编写，不能靠 @content 自动注入多段帧
想实现 0% → 50% → 100% 三段位移？别指望 @each 循环自动生成帧顺序。Sass 编译期无法保证帧顺序，且 CSS 标准仍要求关键帧名静态，顶层循环照样报错。
- 放弃“全自动多帧”的幻想，改用「模板 mixin + 手动帧内容」结构
- 写一个包裹型
@mixin keyframes-template($name) { @keyframes #{$name} { @content; } } - 具体帧写在调用处：
@include keyframes-template('my-skeleton-scan') { 0% { background-position: -200% 0; } 50% { background-position: 0 0; } 100% { background-position: 200% 0; } } -
@content不能接收多个参数块，每段帧得写在一个@content调用里，别拆开
最容易被忽略的一点：关键帧名一旦重复（比如两个库都用了 @keyframes fade-in），后加载的会静默覆盖前一个——浏览器不会警告，动画行为可能突然变化，CI 工具也很难自动发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
