less 编译 linear-gradient() 失败的根本原因是解析器误将其中逗号、括号及单位混合表达式（如 100% - 20px）当作 less 语法处理；修复方式是用 ~"" 完整转义整个函数，含变量时用 @{var} 插值，mixin 中须统一封装，calc() 混用时也需独立转义。
Less 本身不解析 linear-gradient()，但会错误识别其中的逗号、括号或单位混合表达式，尤其当它嵌套在变量、mixin 或 calc() 中时，容易触发语法报错或意外计算。修复核心是让 Less 停止“插手”这段 CSS 字符串。
为什么 linear-gradient() 在 Less 里会编译失败
常见错误现象包括：ParseError: Unrecognised input、css-semicolonexpected，甚至输出空值或错误数值（比如把 100% - 20px 当作 Less 表达式算成 80%）。根本原因不是渐变语法本身错，而是 Less 解析器在以下场景误判：
- 把逗号当成 Less 列表分隔符（如
linear-gradient(top, #f00, #00f)中的逗号） - 把括号内带单位的减法（如
100% - 20px）当作 Less 数学运算 - 在 mixin 参数或变量拼接中未转义，导致
@{color}插入后破坏结构
用 ~"" 转义完整渐变字符串
这是最稳妥、兼容性最好的写法：用 ~"" 包裹整个 linear-gradient() 函数，强制 Less 原样输出，不解析内部任何符号。
正确示例：
.btn {
background-image: ~"linear-gradient(45deg, #ff6b6b, #4ecdc4)";
}
含变量时，必须用 @{var} 插值进引号内：
@start: #3498db;
@end: #2c3e50;
.btn {
background-image: ~"linear-gradient(135deg, @{start}, @{end})";
}
注意：~ 必须紧贴引号，引号内不能有换行，插值语法 @{var} 不能写成 @var 或漏掉花括号。
避免在 mixin 内部裸写 linear-gradient()
如果封装渐变逻辑为 mixin，别直接展开函数体，否则调用时仍可能被解析。应统一用 ~"" 封装参数：
.gradient-bg(@deg, @a, @b) {
background-image: ~"linear-gradient(@{deg}, @{a}, @{b})";
}
.box { .gradient-bg(120deg, #e74c3c, #9b59b6); }
这样既复用逻辑，又规避解析风险。切忌写成：
.gradient-bg(@deg, @a, @b) {
background-image: linear-gradient(@deg, @a, @b); // ❌ Less 会尝试解析 @deg 和逗号
与 calc() 混用时要双重转义
实际项目常出现 background: linear-gradient(...) calc(...) 组合，这时两个函数都要独立转义：
.panel {
background: ~"linear-gradient(to bottom, #fff, #eee)" ~"calc(100vh - 80px)";
}
不要试图只转一个——calc() 里的单位混合（如 100vh - 80px）同样会被 Less 计算，必须单独包裹；而渐变里的逗号和括号也需隔离。两者互不干扰，各自 ~"" 即可。
最容易被忽略的是：即使你用了 ~""，如果引号内拼错了 CSS 语法（比如漏了括号、颜色值无效），Less 不会报错，但浏览器会静默忽略整条声明——得靠 DevTools 查最终生成的 CSS 才能定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
