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; }
}</p>
这样所有调用 .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 =</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><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();</p>
新增尺寸只需往两个列表里加一项，不用碰具体样式规则。注意：旧版 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;
}</p>
这样 JS 切换 document.documentElement.style.setProperty('--skeleton-bg-light', '#e0e0e0') 时，Less 编译出的 CSS 会立即响应。关键点：Less 的 var() 必须带 fallback 值，否则编译期报错。
真正难的是动画与 DOM 生命周期的配合——比如骨架屏在数据加载完成前要保持动画，加载后得立刻停掉并淡出。这部分没法靠 Less 解决，得靠 JS 控制 animation-play-state 或切换 class，但 Less 提供的变量和混入，至少让样式层不成为瓶颈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
