less 默认解析 calc() 导致报错或非法 css，需用 ~"calc(100% - @{gap})" 原样输出；注意空格与单位，避免在 less 中预计算 calc() 内容。
Less 默认会尝试解析 calc() 内部表达式，结果不是报错就是输出非法 CSS。想让它原样保留、交给浏览器运行，必须显式告诉 Less：“别动这串文本”。
为什么直接写 calc(100% - @gap) 会失败
Less 把 calc() 当作普通函数处理，试图在编译期求值。但 @gap 是带单位的变量（比如 @gap: 20px），而 Less 不允许在 calc() 里直接插值——它既不识别 CSS 运行时语法，也不支持单位混算。常见报错是 Operation on an invalid type 或生成类似 width: calc(100% - 20px); 这种看似正常、实则被编译器“吞掉变量”的无效输出。
-
calc()是浏览器运行时行为，和 Less 编译期完全隔离 - 所有变量、运算都得在 Less 层面先算完，或用字符串绕过解析
- 直接拼接（如
"calc(100% - " + @gap + ")"）在旧版 Less 中会触发类型错误
用 ~"calc(...)” 强制字符串输出
这是最稳定、兼容性最好的做法。波浪号 ~ 表示“原始字符串”，@{gap} 是变量插值语法，两者配合让 Less 完全跳过计算，只做字面量替换。
- 正确写法：
width: ~"calc(100% - @{gap})"; -
@gap可以是20px、1rem、甚至var(--spacing)，只要最终拼出合法 CSS 即可 - 注意空格：必须保留
calc()内部的空格，例如~"calc(100% - @{gap})"✅，~"calc(100%-@{gap})"❌（浏览器会解析失败） - IDE（如 WebStorm）可能标红，但不影响编译结果；确认输出 CSS 中是否含完整
calc(100% - 20px)
避免在 Less 中对 calc() 做数学运算
有人试图用 Less 函数预处理 calc() 表达式，比如 percentage(2/3) 或 unit(@base * 2, px)，但这和 calc() 的设计目标冲突——calc() 的价值就在于混合单位（% 和 px）、响应式动态计算。一旦用 Less 算死，就失去弹性。
- 不要写：
width: calc(@base * 2);—— Less 不支持带单位乘除相对单位 - 不要写：
width: calc(percentage(2/3));——percentage()返回的是纯数字，缺少%单位，CSS 会拒绝 - 真正需要预计算的场景（如栅格列宽），直接用 Less 输出固定值：
width: unit(@colWidth * 3, px);，而非塞进calc()
关键就一条：凡是想留给浏览器 runtime 计算的，一律用 ~"calc(...)" 包裹；凡是 Less 能提前算清的，就别塞进 calc()。混用两者最容易在调试时发现样式“看起来写了却没生效”——其实是 Less 静默失败，或者浏览器收到非法表达式后忽略整条声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
