less 3.x 会错误解析 calc() 等含括号的原生 css 语法，必须用 ~"..." 转义；伪元素、否定选择器等同理；第三方 css 应保留 .css 后缀或用 @import (reference) 引入。
Less 3.x 会把 calc() 里的括号当成自己语法的一部分
这不是你写错了，是 Less 解析器在编译期主动“介入”了 CSS 运行时逻辑。它看到 calc(100% - 20px)，就尝试按自身规则解析括号和减法，结果要么报 ParseError: missing closing ')'，要么把 20px 当成变量名去查 @20px，最终输出 calc(100% - 20) 或直接失败。
必须用 ~"" 转义整个 calc() 表达式
这是 Less 3.x 最稳定、最无歧义的解法：波浪号 + 双引号明确告诉编译器“别解析，原样吐出去”。
-
width: ~"calc(100% - 20px)";→ 输出width: calc(100% - 20px); - 带变量时：
@gap: 20px; width: ~"calc(100% - @{gap})";（注意不是~"calc(100% - "@gap")"） - 不要写
calc(100% - @gap)—— Less 会尝试运算单位混合，必然报错
伪元素、否定选择器等含括号的原生语法也得转义
:not(.foo)、::before、:is(a, b) 这类 CSS 原生选择器，在 Less 3.x 中同样会被误判为函数调用或嵌套异常。
- 错误写法：
.box:not(.active) { ... }→ 可能触发ParseError - 安全写法：
.box:~"not(.active)" { ... }或拆成两层：.box { &:~"not(.active)" { ... } } -
::before同理：&:~"before" { content: ""; } - 媒体查询里含括号没问题：
@media (min-width: 768px)是特例，Less 专门识别了这种语法
第三方 CSS 文件不能直接改后缀为 .less
把 normalize.css 或 ant-design.css 直接重命名成 .less，Less 3.x 会试图解析所有括号、冒号、连字符，90% 情况下编译失败或样式错乱。
- 正确做法：保留原
.css后缀，加/* webpackIgnore: true */注释，让less-loader跳过处理 - 若必须走 Less 编译流程，用
@import (reference)引入，避免重复输出 - 存量项目迁移时，先统一改成
.css.less后缀，再逐个用~""修复括号问题，别一次性全改
真正难的不是写对一个 calc()，而是所有含括号的原生 CSS 语法——从选择器到函数，都得在 Less 3.x 的语义边界上踩准那条线：该转义的必须转义，该隔离的必须隔离，没有模糊地带。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
