less 中没有 svg-gradient 函数，它既非 less 内置也非 css 原生；需手动构造编码后的 svg data uri 或用 mixin 封装原生 linear-gradient，真正 svg 编码应由 postcss 等构建工具处理。
svg-gradient 函数在 Less 中根本不存在
Less 官方内置函数里没有 svg-gradient。它既不是 Less 的函数，也不是 CSS 原生函数——你搜到的所谓“Less svg-gradient”基本都源于混淆：有人把自定义 mixin 名字起成 svg-gradient，或误将 PostCSS 插件能力套到 Less 上。
想用 SVG 生成渐变背景，得手动构造 data URI
CSS 中真正能用 SVG 实现高兼容渐变的方式是写一个内联 SVG，转成 data:image/svg+xml URI。Less 可以拼接字符串生成它，但必须严格处理编码和转义：
- SVG 内容需去除换行、缩进，属性值用双引号，
<code>>&必须 HTML 实体化（如<） - 整个 SVG 字符串要经
encodeURIComponent()编码（但 Less 本身不支持运行时编码，所以得靠构建工具或手动生成） - 常见翻车点：直接在 Less 里写未编码的
<svg></svg>标签，导致编译报错或浏览器解析失败
示例（仅作示意，不可直接编译）：background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ff0000'/%3E%3Cstop offset='100%25' stop-color='%230000ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E");
更实际的做法：用 Less mixin 封装 CSS 线性/径向渐变
绝大多数场景下，直接用 CSS 原生渐变函数更可靠。Less 可通过 mixin 复用逻辑，比如：
.bg-gradient(@dir, @stops) { background: linear-gradient(@dir, @stops); }
调用：.bg-gradient(45deg, #f00, #00f);
- 避免 SVG 编码陷阱，兼容性更好（
linear-gradient在现代浏览器中无问题） - 需要透明度或色标位置控制时，传入完整色值如
rgba(255,0,0,0.8) 0%, rgba(0,0,255,0.2) 100% - 若真需 SVG 渐变（比如复杂几何遮罩），建议交给构建步骤生成静态 data URI 字符串，而非在 Less 中动态拼接
PostCSS 或构建时插件才是处理 SVG 渐变的合理位置
Less 是静态预处理器，不执行 JS、不处理资源编码。真正自动把 SVG 转成 data URI 的能力属于 PostCSS（如 postcss-inline-svg）或 Webpack/Vite 插件。
- 例如在 CSS 中写
background: svg-load("./grad.svg", fill=#f00);，由插件在构建时替换为编码后 URI - Less 里硬塞这类逻辑，最终要么编译失败，要么产出不可靠字符串
- 如果你正在维护一个老项目且被要求“Less 里写 svg-gradient”，先确认是否有人把别的工具链功能记混了
真正难的不是写法，而是分清：哪部分该由预处理器做，哪部分必须交给后续构建步骤——这个边界一旦搞错，所有调试都在错误的方向上打转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
