LESS用递归mixin生成li的animation-delay：定义.generate-scan-delays(@n, @base)递归生成nth-child规则，延迟值为(@n-1)*@base，避免手写冗余CSS，适配动态数量列表。
用 LESS 变量和循环生成错开的扫描动画 delay
纯 CSS 写 10 个 li 的 animation-delay 很痛苦，而 LESS 的 .for() 或递归 mixin 能自动生成带递增延迟的规则，适配动态数量的骨架项。关键不是“写得快”，而是“改得稳”——比如把总时长从 2s 改成 2.3s，所有延迟值自动按比例重算。
常见错误是直接在 @keyframes 里用 @i * 0.1s，但 LESS 不支持在 @keyframes 块内插值；必须把逻辑放在选择器层。
推荐写法：
.generate-scan-delays(@n, @base: 0.1s) when (@n > 0) {
.item:nth-child(@n) {
animation-delay: (@n - 1) * @base;
}
.generate-scan-delays(@n - 1, @base);
}
.generate-scan-delays(6); // 生成 6 个 item 的错峰 delay
使用场景：骨架屏列表、仪表盘指标卡片、API 响应中待加载的卡片组。若后端返回 12 条数据，就调用 .generate-scan-delays(12)，无需手写 12 行。
LESS 中控制 linear-gradient 扫描线的 angle 和 size
科技感扫光常需多角度切换（如 45deg 模拟斜向光束，90deg 模拟横向扫描，135deg 模拟右上光效），硬编码在每个 class 里会重复。用 LESS 参数化 mixin 把角度、透明度、尺寸全收口：
容易踩的坑：background-size 必须设为宽度 > 容器（如 200% 100%），否则 background-position: -100% 0 到 100% 0 位移时动画会跳帧或卡顿——这不是浏览器 bug，是百分比计算规则导致的。
示例 mixin：
.scan-gradient(@angle: 45deg, @light: rgba(255, 255, 255, 0.6), @dark: transparent) {
background-image: linear-gradient(@angle, @dark 40%, @light, @dark 60%);
background-size: 200% 100%;
background-position: -100% 0;
animation: scan-move 2s infinite;
}
@keyframes scan-move {
to { background-position: 100% 0; }
}
调用：.scan-gradient(90deg, rgba(0, 255, 255, 0.4)); 即可复用整套逻辑。
避免在 LESS 里滥用 will-change 导致 iOS 扫描线错位
LESS 编译后仍是普通 CSS，所以 will-change: background-position 的副作用不会因预处理器消失。iOS Safari 在 overflow: hidden 父容器下会把该声明解释为“强制重绘背景层”，结果扫描线突然截断或偏移半像素——模拟器测不出，必须真机连 Safari 开发者工具调试。
更稳妥的硬件加速方案：
- 用
transform: translateZ(0)替代will-change，LESS 里可封装为.hw-accel()mixin - 若必须用
will-change，只在动画触发时用 JS 动态加 class（如.is-scanning），动画结束立即remove，不写死在 LESS 规则里 - 移动端优先设
background-attachment: scroll防止视差滚动干扰扫描节奏
扫描动画与文字骨架的兼容性陷阱
有人想用 background-clip: text 给文字型骨架加扫光，LESS 里写成 .text-scan { -webkit-text-fill-color: transparent; background: linear-gradient(...); -webkit-background-clip: text; } ——这在 Safari 和旧版 Chrome 里基本失效，因为骨架文本通常没真实内容、字体未加载、甚至 DOM 节点被 display: none 临时隐藏。
正确路径是放弃“文字遮罩”，统一用块级元素模拟：
.skeleton-text { height: 1.4em; width: 80%; background: #e0e0e0; .scan-gradient(90deg); }
性能影响：文字骨架用 background-clip 会触发额外的合成层，而块级模拟仅一层绘制，FPS 更稳。复杂点在于——你得提前知道每行文字的 line-height 和大致宽度，不能靠 content 自适应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
