<p>Less编译CSS语法错误主因是解析器误将CSS原生函数当自身语法处理；修复方式统一用~""转义，如~"calc(100% - 20px)"、~"linear-gradient(...)"、~"var(--primary)"，变量需在引号内用@{var}插值。</p>
Less 编译报 CSS 语法错误，90% 不是 CSS 写错了，而是 Less 解析器把本该原样输出的 CSS 片段当成了自己的语法在解析——比如把 linear-gradient() 里的逗号当列表分隔符，把 calc() 里的减号当运算符，甚至把 --primary 当成非法变量前缀直接卡住。
为什么 calc(100% - 20px) 会编译失败
Less 默认把 - 和括号内的表达式当作数学运算处理，而 calc() 必须原样透传给浏览器。不加防护时，100% - 20px 会被强行计算（单位混合导致结果失真），或抛出 Variable @20px is undefined 这类误导性错误。
- 最稳写法：
width: ~"calc(100% - 20px)";——~""显式禁用解析，引号内空格必须保留 - 带变量时：
@gap: 24px; width: ~"calc(100% - @{gap})";—— 变量必须自带单位，@gap: 24;会导致插值后变成calc(100% - 24px)，但后续改单位就断链 - 别写
calc(100% - @gap)—— Less 会先尝试算这个式子，必然崩
为什么 linear-gradient(45deg, #f00, #00f) 报 css-semicolonexpected
错误不是出在渐变语法，而是 Less 把逗号当成参数分隔符、把括号内含单位的减法（如 100% - 20px）当成表达式求值。它根本没打算解析渐变，只是“手滑”截胡了。
- 固定值写法：
background-image: ~"linear-gradient(45deg, #f00, #00f)"; - 含变量时：
@start: #3498db; background-image: ~"linear-gradient(135deg, @{start}, #2c3e50)";——@{start}必须在引号内，不能写成~"linear-gradient(...)" + @start - 别漏
~：只写"linear-gradient(...) "虽然能过编译，但某些旧版 lessc 会额外加引号输出，浏览器拒收
为什么 grid-area: 2/2/3/3 变成一个数字
/ 在 Less 里默认是除法运算符，2/2/3/3 被算成 0.3333333333333333，然后输出成无效的 grid-area: 0.3333333333333333;。这不是 Grid 写法错，是 Less 抢答了。
立即学习“前端免费学习笔记（深入）”；
- 所有含
/的 Grid 值都得转义：grid-area: ~"2/2/3/3";、grid-column: ~"2 / 4"; -
repeat(@n, 1fr)永远无效 —— 浏览器不支持运行时计算列数，只能改用repeat(auto-fit, minmax(@min, 1fr)) - IE11 兼容不能只靠 Autoprefixer：必须手动写
-ms-grid-column等前缀规则，且fr在 IE 里基本不可用，得换auto或百分比
为什么 var(--primary) 编译后是空的或报错
Less 解析器看到 -- 就放弃识别，既不透传也不报明确错误，常静默输出 var() 或直接崩在 ParseError: Unrecognised input。它把 --primary 当作非法标识符前缀，而不是 CSS 自定义属性。
- 强制透传：
color: ~"var(--primary)";—— 注意是~"var(--primary)"，不是~"var(--@{primary})"（~""内不支持插值） - 要动态变量名，得先拼字符串再转义：
@prop: "primary"; color: ~"var(--@{prop})"; - fallback 必须显式写：
~"var(--primary, #007bff)"—— Less 不会帮你补，浏览器也只认字面量 fallback
真正容易被忽略的是：这些转义操作（~""、引号包裹）只解决“Less 别乱动”的问题，不校验最终 CSS 是否合法。比如拼出 --theme-dark-primary 却没在 :root 里定义，编译完全通过，但浏览器静默忽略——得靠人工核对或运行时调试工具才能发现。
