旧版ie（6–9）需用filter: progid:dximagetransform.microsoft.gradient()模拟线性渐变，颜色格式为#aarrggbb，gradienttype=0表示垂直，且必须置于标准background之后并加zoom: 1触发haslayout。
如何用 .gradient-linear() 生成兼容老浏览器的线性渐变
直接写 linear-gradient() 在 Safari ≤6、Chrome ≤25 或 Firefox ≤35 里大概率不渲染——不是 Less 编译错了，是缺厂商前缀。必须手动补 -webkit- 和 -moz-，且方向参数要转换。
旧 WebKit 不认 to right，得转成 left；Firefox 旧版对 50% 停靠点解析也不一致，建议统一用小数 0.5 避免偏移。
-
.gradient-linear()内部必须按顺序输出：background-image: -webkit-linear-gradient(...)→-moz-→ 标准语法，否则新浏览器永远用不到原生特性 - 方向参数传入时做映射：比如
@dir: ~"to right"进来，内部用replace(@dir, "to right", "left")转换 - 别在一个选择器里多次调用该 mixin，会重复输出整套前缀规则，增大 CSS 体积
为什么 .gradient-radial() 不能照搬线性写法
径向渐变在旧浏览器中支持更碎片化：-webkit-radial-gradient 要求位置参数（如 center, circle），而标准语法用 circle at center，结构不兼容。硬塞进同一个 mixin 会导致编译后 CSS 无效。
更关键的是，radial-gradient() 的默认形状在不同浏览器中可能变成 ellipse 或 circle，视觉差异明显，不能依赖默认值。
- 单独定义
.gradient-radial(@shape: circle, @pos: center, @a, @b)，强制显式声明形状和位置 - 旧 WebKit 只接受
-webkit-radial-gradient(center, circle, @a, @b)，不支持at语法，必须拆开处理 - IE10+ 支持标准
radial-gradient()，但 IE9 及以下完全不支持，降级方案得靠background: @fallback-color单独写
@direction 和 @stops 参数怎么传才不出错
Less 把未转义的字符串当字面量拼进 CSS，结果变成 linear-gradient("to bottom", #000, #fff)——引号是致命错误，浏览器直接忽略整条声明。
颜色停止点如果用逗号分隔的多值（如 #f00, #0f0, #00f），Less 会当成三个独立参数，而不是一个 list，each() 遍历时就崩了。
-
@direction必须转义：~"to bottom"或%("to bottom")，不能写成"to bottom" - 多色停靠点统一用 list 类型：
@stops: #f00 0%, #0f0 50%, #00f 100%，再用each(@stops)安全拼接 - 所有颜色变量（如
@primary）必须在 mixin 定义前声明，否则调用时值为空，编译不报错但输出linear-gradient(to bottom, , )
如何让渐变同时支持 CSS 变量 fallback 和静态计算
Less 编译期根本读不到运行时的 var(--bg-start)，所谓“自动检测是否存在”纯属误解。想兼顾主题切换和构建时优化，只能手动分层输出。
一套生成完整降级链（含纯色 fallback + 带前缀渐变 + 标准渐变），另一套只注入 background: var(--bg-gradient)，不展开任何计算——由开发者自己决定在哪用哪套。
- 写两个独立 mixin：
.gradient-linear-fallback()和.gradient-linear-css-vars() - 调用时并列写：
.card { .gradient-linear-fallback(); .gradient-linear-css-vars(); } - 不要试图在 mixin 里用
isdefined()判断 CSS 变量——它只查 Less 变量，对var()完全无感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
