可用lighten()/darken()在less中动态生成渐变色阶，如background: linear-gradient(to right, @primary, lighten(@primary, 12%))；但需确保@primary为合法颜色变量、前置声明，且避免链式调用与高饱和色过度调整。
怎么用 lighten/darken 动态算出渐变色阶
直接写 linear-gradient(to bottom, #3498db, #2980b9) 看似简单，但换主题色时要手动调两个颜色值，极易漏改或失配。Less 的 lighten() 和 darken() 是编译期函数，必须确保输入是合法 color 类型，否则编译失败或产出透明色。
-
@primary: #3498db;必须在 mixin 定义前声明，且不能是字符串（如"#3498db"） - 慎用链式调用：
lighten(darken(@primary, 10%), 10%)因 HSL 插值非线性，结果常偏移预期 - 高饱和色（如
#e74c3c）用darken()超过 25% 容易直接变黑，建议先查其 L 分量再设步长 - 推荐组合：
background: linear-gradient(to right, @primary, lighten(@primary, 12%));
为什么 direction 参数必须转义才能拼进 linear-gradient()
Less 不会自动把变量 @direction: to right; 当作 CSS 关键字插入 —— 默认会加引号变成 "to right"，而浏览器只认无引号的 to right。不转义就等于语法错误，渐变直接降级为纯色。
- 正确写法：
background-image: linear-gradient(~"@{direction}", @color1, @color2); - 不要用
%("@{direction}")，它只做格式化，不剥离引号 - 方向默认值设为
@direction: to bottom;，避免用bottom这类旧语法，IE10+ 全兼容 - 若需支持 Android 4.3 及更早，必须额外输出
-webkit-linear-gradient()，且方向要转成bottom（去掉to）
多色标渐变怎么避免 mixin 逻辑爆炸
超过 3 个色标时，硬塞进一个 mixin 会导致条件判断臃肿、可读性差，且 Less 3.0 以下版本不支持 each()，强行循环容易编译失败。
- 双/三色场景用固定参数：
.gradient-bg-stops(@stops: #f00 0%, #ff0 50%, #00f 100%) -
@stops传入 list 格式，用~"@{stops}"整体转义拼接，不拆解校验 - 拒绝这种写法：
if(length(@args) > 3, ...)—— 编译期无法可靠判断 list 长度，尤其含百分比时易误判 - 4 色以上渐变，直接手写 CSS 更稳；Less 只负责生成 fallback 或主题色变量
repeating-linear-gradient 里角度单位不能省
很多人定义 @angle: 45; 然后塞进 repeating-linear-gradient(@angle, ...)，结果浏览器报错或空白——因为 CSS 要求角度必须带单位，45 是无效值，45deg 才合法。
- 参数定义必须带单位：
@angle: 45deg;或@angle: unit(45, deg); - 别在 mixin 内部用
unit(@angle, deg)强转——如果输入已是45rad，强转会出错 - 间距单位同理：
@gap: 8px;，不能只写8，否则@gap * 2产出16（无单位），CSS 不认 - Safari 旧版对
repeating-linear-gradient(45deg, ...)支持良好，但对45直接忽略整条声明
真正麻烦的不是写几行 mixin，而是颜色类型校验、单位绑定、字符串转义这三处——它们不出错时一切正常，一出错就是渐变消失或编译中断，而且错误提示往往不指向根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
