直接用 .gradient-bg() 混合器（带 @start-color、@end-color、@direction 参数）可覆盖95%线性渐变场景；需转义 @direction 为 ~"to bottom" 防引号错误，变量须前置声明，避免 darken(#fff,10%) 导致透明，多色用专用 .gradient-bg-stops()，CSS 变量需手动分层输出。
直接用 .gradient-bg() 混合器，带 @start-color、@end-color、@direction 三个参数，就能覆盖 95% 的线性渐变场景；硬写 linear-gradient() 或堆一堆固定命名混合器（如 .bg-red-to-blue()）反而导致维护雪崩。
为什么编译后渐变显示为纯色或完全不生效
常见现象是浏览器渲染出单色块，或 DevTools 里看到 background: linear-gradient("to bottom", #3498db, #2c3e50) —— 注意引号，这是致命错误。
-
@direction必须转义：写成~"to bottom"或%("to bottom")，否则 Less 把它当字符串字面量拼进去，加了引号的linear-gradient()浏览器直接忽略 - 所有颜色变量（如
@primary）必须在混合器定义前声明，@primary: #3498db放在.gradient-bg()后面会导致调用时解析为空 - 避免对极值色用
darken(#fff, 10%)：结果可能是transparent，编译不报错但视觉失效；改用fade(@color, 90%)控制透明度更稳
如何让一个混合器同时支持 CSS 变量 fallback 和静态计算
Less 无法运行时判断 var(--bg-start) 是否存在，所以不能靠条件逻辑“自动切换”，必须手动分层输出。
- 单独写一个
.gradient-bg-fallback()：生成完整降级链，例如background: #eee; background: linear-gradient(...) - 再写一个
.gradient-bg-css-vars()：只输出background: var(--bg-gradient, linear-gradient(...))，不展开任何 Less 计算 - 调用时显式并列写：
.my-card { .gradient-bg-fallback(); .gradient-bg-css-vars(); }，把控制权交给开发者
多色停止点（三段及以上）别塞进两参数混合器
试图用 .gradient-bg(@start, @mid, @end) 硬撑三色，会迅速让接口混乱、默认值难设、调用易错。
立即学习“前端免费学习笔记（深入）”；
- 另起一个专用混合器：
.gradient-bg-stops(@stops: #f00 0%, #ff0 50%, #00f 100%)，参数类型是 list，语义清晰 - 内部用
each()遍历@stops生成逗号分隔的颜色步长，比手动拼字符串安全 - 方向仍走统一逻辑：传
@direction: ~"to right"，和两色版保持一致，降低学习成本 - 注意 Safari 对多色
linear-gradient()的旧 Bug（2026 年仍偶发模糊），建议在@stops中避免相邻色差过小（如#333 49%, #334 51%）
真正难的不是写对一个渐变，而是让所有渐变在主题切换、暗色模式、CSS 变量注入、移动端 Safari 渲染之间保持行为一致——这要求每个混合器都明确自己负责的边界：计算归 Less，变量归 CSS，降级归开发者手动组合。
