Less通过变量、混入和循环统一管理骨架屏动画参数、多尺寸类名及CSS变量，显著降低维护成本，但动画与DOM生命周期配合仍需JS控制。
为什么直接用 CSS 写骨架屏动画容易失控
Less 本身不执行动画，但能显著降低骨架屏动画的维护成本。问题常出在：多个 .skeleton-item 需要统一控制闪烁时长、延迟、颜色渐变，纯 CSS 会重复写 @keyframes 和选择器；换主题色时，所有 background-image: linear-gradient(...) 里的色值都要手动改；更麻烦的是，当需要为「头像+标题+描述」三段式结构生成不同宽度/高度的占位块时，CSS 没法参数化生成。
用 Less 变量 + 混入（mixin）统一控制动画节奏
把动画核心参数抽成变量，再封装成可复用的混入，避免散落在各处的 animation-duration 或 animation-delay 值不一致：
@skeleton-animation-duration: 1.4s;
@skeleton-animation-easing: ease-in-out;
<p>.skeleton-shimmer() {
background: linear-gradient(90deg, transparent, @skeleton-bg-light, transparent);
background-size: 200% 100%;
animation: shimmer @skeleton-animation-duration infinite @skeleton-animation-easing;
}</p><p>@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}这样所有调用 .skeleton-shimmer() 的元素，动画节奏自动同步。改一个变量，全站骨架屏呼吸感就一致。
用嵌套 + 循环生成多尺寸占位块类名
骨架屏里常见 .skeleton-avatar-sm、.skeleton-title-lg 这类尺寸类，手写易漏、难扩展。Less 的 .each() 函数（需 Less v4+）或传统循环配合 extract() 能批量生成：
立即学习“前端免费学习笔记（深入）”；
@sizes: sm, md, lg, xl;
@widths: 24px, 40px, 64px, 80px;
<p>.loop-sizes(@i: 1) when (@i =< length(@sizes)) {
@size: extract(@sizes, @i);
@width: extract(@widths, @i);</p><p>.skeleton-avatar-@{size} {
width: @width;
height: @width;
border-radius: 50%;
}</p><p>.skeleton-title-@{size} {
height: @width <em> 0.8;
width: (@width </em> 3);
}</p><p>.loop-sizes(@i + 1);
}</p><p>.loop-sizes();新增尺寸只需往两个列表里加一项，不用碰具体样式规则。注意：旧版 Less 不支持 .each()，必须用这种递归循环写法。
导出 CSS 变量供 JS 动态切换主题时复用
如果骨架屏要随深色/浅色模式切换背景色，别在 Less 里硬编码 #f0f0f0 —— 改用 CSS 变量，并在 Less 中定义默认值：
:root {
--skeleton-bg-dark: #333;
--skeleton-bg-light: #f5f5f5;
--skeleton-text: #ccc;
}
<p>@skeleton-bg-light: var(--skeleton-bg-light, #f5f5f5);
@skeleton-bg-dark: var(--skeleton-bg-dark, #333);
@skeleton-text: var(--skeleton-text, #ccc);</p><p>.skeleton-line {
background-color: @skeleton-bg-light;
color: @skeleton-text;
}这样 JS 切换 document.documentElement.style.setProperty('--skeleton-bg-light', '#e0e0e0') 时，Less 编译出的 CSS 会立即响应。关键点：Less 的 var() 必须带 fallback 值，否则编译期报错。
真正难的是动画与 DOM 生命周期的配合——比如骨架屏在数据加载完成前要保持动画，加载后得立刻停掉并淡出。这部分没法靠 Less 解决，得靠 JS 控制 animation-play-state 或切换 class，但 Less 提供的变量和混入，至少让样式层不成为瓶颈。
