Less无法监听CSS加载进度，所谓进度条实为JS模拟的视觉反馈；应通过.progress-colors() Mixin统一管理渐变色值，支持主题与深色模式；用data-loaded属性驱动状态响应，IE11需备选类名方案并注意transition前缀及状态同步。
Less里没法直接监听CSS加载进度
CSS本身是声明式资源，浏览器不提供加载进度事件，Less作为预处理器更不参与运行时加载。所谓“CSS加载进度条”，实际是前端用JS模拟的视觉反馈，Less只负责生成带颜色过渡逻辑的CSS规则——重点在怎么用Mixin把渐变色、状态色这些写得可维护、易复用。
用.progress-colors() Mixin统一管理进度阶段色值
硬编码多个background-color或写一堆@keyframes容易失控。用Mixin抽离颜色映射关系，既支持主题切换，也避免重复计算。
- 接受一个颜色变量（如
@primary）和可选的明度偏移参数，自动生成起始色、中间色、完成色 - 内部用
lighten()/darken()而非固定HEX，保证深色模式下仍协调 - 别直接在Mixin里写
transition，那是组件层该管的事；Mixin只输出色值
.progress-colors(@color, @offset: 15%) {
--progress-start: lighten(@color, @offset);
--progress-mid: @color;
--progress-end: darken(@color, @offset);
}
配合data-loaded属性做状态驱动，别依赖@import顺序
很多人想用@import顺序控制样式生效时机，但Less编译后所有CSS已合并，无法反映真实加载节奏。真正可控的是JS触发的DOM状态。
- 在JS加载完关键CSS后，给
加data-loaded="true"这类属性 - 用属性选择器配合Mixin生成的CSS变量，实现状态响应
- 注意：不要在Mixin里写
[data-loaded="true"]，那会污染复用性；把它留在调用处
.loader-bar {
background: var(--progress-start);
transition: background 0.3s ease;
}
[data-loaded="true"] .loader-bar {
background: var(--progress-end);
}
IE11下var()不支持，得备选方案
如果还要兼容IE11，CSS变量行不通，就得回退到传统类名切换。这时Mixin要支持双输出模式：默认生成CSS变量版，加参数就吐出类名版。
- 用
@support包裹CSS变量逻辑，IE自动跳过 - Mixin里用
.when()条件判断是否启用类名模式，避免生成冗余代码 - 别忘了
transition在IE11里只认-ms-前缀，但Less的.transition()等内置函数已处理好了
复杂点在于状态同步——JS必须同时操作data-属性和class，否则视觉和逻辑脱节。这个衔接点最容易漏测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
