less 中生成 background-position 序列帧必须用递归 mixin + when 守卫，禁用 for 插件；需按行优先顺序计算偏移值，插值必须为纯数字再补 %，否则编译失败。
Less 循环生成 background-position 序列帧必须用递归，不能用 for
Less 没有原生 for 循环，所谓 “for 插件” 在 CI 或团队协作中极易出错，编译结果不可控。动态生成序列帧唯一可靠的方式是递归 mixin + 条件守卫（when）。比如雪碧图 4×6 共 24 帧，需按行优先顺序生成 0% 到 100% 的关键帧，每帧对应一个 background-position 偏移值。
常见错误是试图在选择器名里直接拼百分比：@{var}% 中的 @var 若未被正确展开为数字（如 4.16），就会编译失败或输出无效 CSS。必须确保插值表达式最终求值为纯数字，再手动补 %。
- 用
.row(@i) when (@i 控制行数，<code>.col(@r, @j) when (@j 控制列数 - 帧序号统一用
@frame: @r * 4 + @j计算，再转成进度百分比：@progress: percentage(@frame / 23)（23 是总帧数 −1） - 关键帧选择器必须写成
@{progress} { ... }，不能漏掉@{}插值语法 -
background-position的偏移要基于单帧尺寸：假设每格宽123.5px、高97px，则写成background-position: (-123.5px * @j) (-97px * @r)
@keyframes 必须顶层声明，名称不能变量化
Less 不允许在 mixin 内部或嵌套块中定义 @keyframes，否则编译报错。你不能写 .animate-sprite() { @keyframes sprite-anim { ... } } —— 这会直接中断构建。
正确做法是把 @keyframes 放在文件最外层，名字用静态字符串（如 sprite-load），然后用递归 mixin 填充其内容体：
@keyframes sprite-load {
.row(0);
}
<p>.row(@i) when (@i </p><p>.col(@r, @j) when (@j 4 + @j;
@progress: percentage(@frame / 23);
@{progress} {
background-position: (-123.5px @j) (-97px * @r);
}
.col(@r, @j + 1);
}</p>
注意：如果多个文件都定义了同名 @keyframes sprite-load，Less 不会去重，最终 CSS 里会出现重复声明，白占体积。
百分比精度与帧数对齐容易出错
序列帧动画要求关键帧分布严格线性，否则播放时会卡顿或跳帧。用 percentage(@frame / 23) 能保证从 0% 到 100% 均匀切分 24 帧（0～23），但若手误写成 / 24，最后一帧就变成 95.833333%，缺了 100% 终止态，动画无法自然收尾。
- 总帧数 N 对应的关键帧数量是 N，起始为
0%，终止为100%，步长 =100% / (N - 1) - 避免用
@i * 4.16%这类硬编码——小数精度丢失后，第 24 帧可能变成99.84%，浏览器不识别 - 调试时可临时加
console.log类似逻辑（靠编译后 CSS 查看）：在 mixin 里插入// @{progress}注释，编译后搜注释确认数值是否连续
IE11 兼容需显式写 0%/100%，不能用 from/to
IE11 不支持 from / to 关键字，只认 0% 和 100%。如果你的递归 mixin 只生成了中间帧（如 4.16%、8.33%），但漏了首尾，IE11 下动画直接不播。
解决方法是在递归前后手动补全：
@keyframes sprite-load {
0% { background-position: 0 0; }
.row(0);
100% { background-position: -494px -485px; } // 最后一格位置：-123.5*4, -97*5
}
其中 -494px 和 -485px 是手动算出的最后一格左上角坐标，不能依赖循环自动生成——因为循环只跑 @r 和 <code>@j ，最后一格是 <code>@r: 5, @j: 3，但 @r * 4 + @j 算出来是 23，对应 100%，所以首尾帧必须独立控制，不能全靠递归。
真正难的不是写循环，而是让每一帧的数值在编译期就确定、对齐、无歧义——少一个 %，少一行 0%，整个动画在某个浏览器里就静音了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
