必须用~"to right"转义方向参数，否则less会将字符串加引号输出为linear-gradient("to right",...)导致浏览器忽略；@direction需为合法css方向值且提前声明为color类型，多色停点应以list格式传入并整体转义。
直接用带参数的 .gradient-bg() Mixin，比手写 linear-gradient() 更稳——但参数不转义、颜色未预定义、方向传错格式，编译后 CSS 里就只剩纯色背景。
为什么 @direction 必须用 ~"to right" 而不是 "to right"
Less 默认把字符串变量当字面量拼接，"to right" 会变成 linear-gradient("to right", #000, #fff)，引号是致命错误，浏览器直接忽略整条声明。只有 ~"to right" 才能剥离引号，输出合法 CSS。
-
@direction: to right;不行——这不是字符串，Less 编译时报错 “expected string” -
@direction: "to right";不行——输出带引号，浏览器拒识 -
@direction: ~"to right";正确——无引号、可拼接、兼容 Safari ≤6 / Chrome ≤25 - 旧 WebKit（如 Android 4.3）还要额外转方向：
replace(@direction, "to right", "left")
.gradient-bg() 的参数怎么设才不踩坑
参数名必须带语义前缀，顺序即契约，不能跳过；颜色必须提前声明为合法 color 类型，不能是字符串 "#3498db"。
- 推荐签名：
.gradient-bg(@bg-start: #007bff, @bg-end: lighten(@bg-start, 20%), @dir: ~"to bottom") - 禁用裸名参数：
.gradient-bg(@start, @end)容易污染外层同名变量 -
@bg-end依赖@bg-start计算，所以@bg-start必须在 mixin 定义前已声明且为 color 值 - 若用
darken(#fff, 10%)，结果是transparent，渐变变空白——要先查 L 值再设步长
多色停止点怎么传进 Mixin 才安全
别用逗号分隔的多个参数，也别用 if(length(@args) > 3) 判断——Less 编译期无法可靠解析含百分比的 list 长度，极易误判。
- 正确方式：
@stops: #f00 0%, #ff0 50%, #00f 100%;定义为 list，再用~"@{stops}"整体转义拼入 - 拒绝写法：
.gradient-bg-stops(@c1, @c2, @c3)→ 4 色以上立刻失控 - 4 色及以上渐变，Less 已难维护，建议直接手写 CSS，只用 Less 控制 fallback 色或主题变量
- 所有色标单位必须显式：写
50%，不写.5；写2px，不写2
IE 和旧 Safari 兼容性怎么兜底
不是加个 -webkit- 就完事——方向参数、语法结构、默认形状在各引擎中完全不一致，必须分路径输出。
- 线性渐变要按顺序输出：
-webkit-linear-gradient()→-moz-linear-gradient()→ 标准语法，否则新浏览器永远用不到原生特性 - 径向渐变不能复用线性逻辑：
-webkit-radial-gradient(center, circle, ...)和radial-gradient(circle at center, ...)结构互斥 - IE9 及以下完全不支持渐变，降级必须显式写：
background: @fallback-color; - Android 4.3 及更早要求角度无
to关键字，to bottom得转成bottom，to right得转成right
真正难的不是写出能编译的 Mixin，而是让每个参数在不同浏览器里都产出预期视觉——方向转义、颜色函数边界、旧引擎语法分裂、list 拼接时机，四者只要漏一个，渐变就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
