Less需封装.linear-gradient() mixin实现兼容性渐变：按-webkit→标准顺序输出，方向参数如to right需转为left，多色标用if()控制，避免filter兼容IE旧版。
Less里没有linear-gradient()函数，但可以封装一个兼容性好的混合（mixin）
Less本身不提供生成渐变的内置函数，linear-gradient()是CSS原生函数，直接写在Less变量或属性值里会被原样输出——但浏览器只认最终CSS里的语法，所以关键不是“实现函数”，而是“安全拼接字符串并控制旧版兼容”。你真正需要的是一个可复用、带前缀处理、支持多色标和方向参数的.linear-gradient() mixin。
- 不能用
~"..."简单包裹，否则无法动态插值多个颜色停靠点 - IE10+ 支持无前缀
linear-gradient()，但Android 4.3及更早需-webkit-linear-gradient() - 方向写法有差异：
to bottom（标准） vsbottom（旧WebKit），混用会导致渲染异常 - 推荐只封装双色/三色场景，超过4个色标时建议手写CSS避免mixin逻辑过重
如何定义支持方向和多色标的.linear-gradient() mixin
用@arguments接收任意数量的颜色参数，用@direction统一控制起始方向，并显式输出两套规则：带-webkit-前缀的旧版 + 标准版。方向默认设为to bottom，避免top/bottom歧义。
.linear-gradient(@direction: to bottom, @color1, @color2, @color3: false) {
background-image: -webkit-linear-gradient(@direction, @color1, @color2, if(@color3, @color3, ~""));
background-image: linear-gradient(@direction, @color1, @color2, if(@color3, @color3, ~""));
}
- 调用示例：
.linear-gradient(to right, #ff9a9e, #fad0c4);→ 输出两行background-image - 如果传入
@color3，第三色标会参与拼接；否则if()返回空字符串，不破坏语法 - 不要试图用
each()循环拼接N个色标——Less 3.5+虽支持each()，但旧项目常卡在3.0，且编译时无法做运行时校验 - 慎用
~"..."包裹整个表达式：它会跳过所有转义检查，@color1含括号或逗号时直接编译失败
为什么不用filter: progid:DXImageTransform.Microsoft.gradient(...)
IE6–9的filter语法与linear-gradient()语义不一致：它只支持两点渐变、不支持角度、色标位置不可控，且强制触发hasLayout导致布局偏移。现代项目基本已放弃IE9及以下支持，强行兼容反而增加维护成本和CSS体积。
- 若必须支持IE9，单独写
.ie9 .my-element { filter: ... }类选择器更可控 - Less编译后CSS体积敏感时，避免为低版本浏览器生成冗余规则——可用
autoprefixer后处理替代部分前缀 -
filter无法与background-color叠加，而linear-gradient()可作为background-image与纯色共存
渐变动画失效？因为background-image无法被CSS过渡
直接对background-image设置transition: background-image 0.3s在所有浏览器中都无效。想实现“渐变切换平滑”，只能靠间接方案：
立即学习“前端免费学习笔记（深入）”；
- 用伪元素
::before叠一层渐变层，通过opacity淡入淡出（最可靠） - 改用
background-color+box-shadow模拟简单双色过渡（限于高斯模糊或边缘晕染） - JS控制
classList切换预设渐变类，配合@keyframes逐帧动画（性能较差，仅适合小范围） - 不要尝试
background-position位移模拟动效——它只对重复渐变repeating-linear-gradient()有效
所谓“平滑渐变背景”，本质是视觉动效问题，和Less封装无关。mixin只负责静态生成，动效得靠CSS层或JS协同解决。
