Less中可用参数化混合.gradient-linear(@direction, @color1, @color2)封装线性渐变，方向需加引号（如"to right"），不支持运行时计算或lighten()等函数直接参与渐变字符串生成。
Less里怎么写可复用的线性渐变函数
直接上结论：Less本身不支持运行时计算渐变值，但可以用参数化混合（.gradient-linear()）封装常见方向+色值组合，生成静态CSS规则。别指望它像JS那样动态换色——那是编译时行为。
关键在于把「方向」「起始色」「终止色」抽成参数，避免每次手写background: linear-gradient(to right, #ff0000, #0000ff)这种重复代码。
-
.gradient-linear(@direction: to bottom, @color1: #000, @color2: #fff)是最实用签名，@direction支持to top/to right/45deg等标准语法 - 必须用引号包裹带空格的方向值（如
"to right"），否则Less解析报错：ParseError: expected ')' got 'to' - 如果要支持多色停靠点，得额外加
@stops参数并用~""拼接字符串——但会牺牲可读性，一般两色够用
为什么不能用lighten()或darken()直接算渐变中间色
有人想用lighten(@base, 20%)生成过渡色再塞进渐变，这思路在Less里走不通。因为linear-gradient()需要的是完整字符串值，而lighten()返回的是颜色对象，直接拼接会导致编译失败：TypeError: Cannot read property 'toCSS' of undefined。
正确做法是把颜色处理逻辑放在参数传入前——比如用JS预处理出三色数组，再喂给Less变量；或者干脆放弃中间色，用CSS原生background-image: conic-gradient()替代（但兼容性差）。
立即学习“前端免费学习笔记（深入）”；
- Less的函数只在编译期执行，无法感知DOM状态或用户交互
- 所有颜色运算必须产出确定的十六进制/rgb值，不能留待浏览器运行时解析
- 若真需动态渐变，应该交由CSS自定义属性 + JS控制，Less只负责兜底静态样式
实际项目中怎么组织渐变变量和混合
别把所有渐变都堆在一个mixins.less里。按场景分层更可控：基础方向混合、主题色渐变集、按钮/卡片专用渐变。
.btn-gradient() {
.gradient-linear(to right, @primary, @secondary);
background-size: 200% 200%;
transition: background-position 0.3s ease;
&:hover {
background-position: right center;
}
}
- 搭配
background-size和background-position能做出悬停位移效果，比纯色切换更自然 - 主题色变量（如
@primary）必须在调用前定义，否则编译时报Variable @primary is undefined - 避免在
.gradient-linear()内部写&:hover——混合应专注「生成渐变」，交互逻辑单独抽离
导出为CSS后渐变失效的常见原因
编译出来的CSS里出现linear-gradient(nan, #000, #fff)？大概率是方向参数没加引号，或者传了未定义变量。Less不会报错，但会把无效值转成nan。
- 检查浏览器开发者工具的Computed面板，确认
background-image是否被其他规则覆盖（比如background: #fff写在后面） - IE10+才支持
to right语法，旧项目需手动补left/top等关键词，或用Autoprefixer处理 - 如果用了CSS-in-JS方案（如Styled Components），Less生成的类名可能被哈希化，导致渐变规则丢失——这时应改用CSS变量注入
渐变不是万能胶，该用伪元素遮罩或SVG就别硬套linear-gradient()。Less能帮你少写几行重复代码，但没法绕过CSS渲染本身的限制。
