background-image: linear-gradient() 不可直接 transition，因属不可插值的 <image> 类型；可行方案包括伪元素 opacity 淡入淡出、background-position 位移模拟流动、CSS 自定义属性 @property 动画渐变参数或 JS 控制变量。
Less 本身不计算“过渡效果”，它只生成静态 CSS；所谓“平滑过渡”必须靠浏览器 runtime 的 transition 配合可动画属性实现，而渐变背景（background-image: linear-gradient()）**不可直接过渡**。你真正要解决的是：如何让渐变色变化看起来平滑——这需要绕过不可动画的限制，用可动画属性间接达成。
为什么 background-image: linear-gradient() 不能加 transition
浏览器明确不支持对 background-image 做插值动画。写了 transition: background-image 0.3s 也完全无效，最终表现为瞬时切换。这不是 Less 编译问题，是 CSS 规范限制。
- 即使你用 Less 动态生成两套渐变规则（比如 .btn {} 和 .btn.active {}），hover 或 class 切换时仍是“跳变”
- 试图用
lighten()或mix()在 Less 里算出中间色再硬塞进多个 class，本质还是离散状态，不是连续过渡 - 所有“渐变过渡”视觉效果，都得靠 opacity、layer 叠加、或 color 等可动画属性来模拟
用两层叠加 + opacity 实现伪渐变过渡
这是目前最可靠、兼容性最好、且能用 Less 管理的方案：固定一层基础渐变，另一层覆盖渐变，通过控制上层 opacity 实现淡入淡出效果。
- 底层（始终可见）：
.btn { background-image: linear-gradient(~"to right", #3498db, #2980b9); } - 上层（带 transition）：
.btn.is-hovered { background-image: linear-gradient(~"to right", #e74c3c, #c0392b); opacity: 1; transition: opacity 0.35s ease; } - 初始状态上层 opacity 设为 0，hover 或 class 切换时设为 1，视觉上就是颜色“渐变”过去
- Less 里可封装成
.gradient-overlay(@dir, @a, @b)mixin，但 opacity 控制必须写在 class 规则里，不能放进 mixin 参数
mix() 是生成中间色的唯一靠谱方式，但仅限编译期
如果你不需要 runtime 过渡，只是想在主题切换时让两套渐变更协调（比如深色模式下起止色更匹配），mix() 比 lighten() 更稳。
立即学习“前端免费学习笔记（深入）”；
-
mix(@primary, #ffffff, 20%)明确表示“20% 白色混合”，不会因 HSL L 值突变发灰 - 方向参数必须转义：
linear-gradient(~"@{direction}", @color1, mix(@color1, @color2, 30%))，否则输出带引号语法错误 - 别传 rgba 颜色进
mix()—— 透明度会被一起混合，结果可能比预期更透；先用fadeout(@color, 0%)去 alpha - 超过 3 个色标就别硬用
mix()推导了，手写@stops: #f00 0%, #ff0 50%, #00f 100%;更清晰
真正需要 runtime 平滑过渡时，别依赖 Less
Less 是编译时工具，它无法响应用户交互或数据变化。当你需要点击后渐变流动、滚动时色值实时插值、或根据传感器倾斜角动态调整角度，就得交给 JavaScript。
- CSS 变量（
--grad-angle,--grad-color-a）配合 JS 修改，再用transition: --grad-angle 0.4s（需 Chrome 119+ 支持） - Canvas 或 SVG 渐变 + requestAnimationFrame 做逐帧插值，完全绕开 CSS 局限
- 纯 CSS 方案只剩 opacity/layers/transform 组合，所有“平滑”都是视觉欺骗，不是真实渐变动画
最容易被忽略的一点：很多人花半天调试 Less mixin 的方向转义和 color stop 位置，却忘了检查 transition 是否真的写在初始状态规则里——它漏掉一行，整个效果就失效。不是 Less 不行，是没踩对 CSS 动画的触发条件。
