许多前端从业者在从纯 CSS 过渡到 Less 预处理器时，常会遇到一个共同的困惑：到底如何在 Less 中定义一个能够正常参与数学运算的 CSS 自定义属性？反复尝试后发现，直接用 calc() 定义变量，编译结果要么原封不动输出，要么直接失效无法使用。这背后的逻辑其实并不复杂，但确实有几个关键点需要彻底理清。
Less 中不能直接用 calc() 定义带运算的 CSS 变量
当你写下 calc(100% - 2rem)，Less 会将其原封不动地输出到 CSS，而不会在编译期提前帮你计算——这是它与 Sass 等其他预处理器的显著区别之一。CSS 自定义属性本身，例如 --foo: 100% - 2rem，浏览器也仅仅把它当作字符串来存储，并不会在运行时自动执行数学运算。因此，所谓“在 Less 中定义带运算逻辑的 CSS 变量”，本质上是在利用 Less 的变量机制与插值能力，在编译阶段完成计算，再将结果注入到 CSS 变量中。
用 @variable 配合插值 ~"" 生成带计算结果的 CSS 变量
Less 变量支持加减乘除以及括号运算，但要让运算结果真正生效，必须使用插值语法 ~"" 进行包裹，否则输出内容会被当作纯字符串处理。
@spacing-base: 1rem;定义基础单位@header-height: (@spacing-base * 4) + 1px;编译期得出4rem + 1px- 问题来了：
--header-height: ~"@{header-height}";会输出--header-height: 4rem + 1px;，但这里的+未被转义，在 CSS 中属于非法写法 - 正确的做法是，提前拼组成合法的 CSS 值。例如
@header-height-value: "4rem + 1px";再插值，或者直接用calc()字符串注入
括号在 Less 数学运算中只控制优先级，不改变输出格式
写 (100% - 2rem) 与 100% - 2rem 在 Less 中完全等价，括号不会让结果自动变成 calc()。要让浏览器在运行时执行计算，必须显式书写 calc()，并确保它出现在最终的 CSS 中：
- 错误示例：
--width: @{(100% - 2rem)};Less 报错，括号不能这样嵌套使用 - 错误示例：
--width: (100% - 2rem);输出--width: 100% - 2rem;，浏览器无法识别 - 正确示范：
--width: ~"calc(100% - 2rem)";输出--width: calc(100% - 2rem);，完美运行 - 更推荐做法：
@gap: 2rem;→--width: ~"calc(100% - @{gap})";
混合使用编译期计算与运行时 calc() 最实用
实际上，大多数场景并不需要 Less 单纯算出一个固定数值，而是希望变量能够随容器响应式变化——这时候 calc() 不可替代。Less 能做的，是减少硬编码、提升代码的可维护性：
- 定义基础尺寸：
@sidebar-width: 240px; - 生成响应式变量：
--main-width: ~"calc(100% - @{sidebar-width})"; - 在 CSS 中使用：
width: var(--main-width); - 如果未来
@sidebar-width改为22rem，所有引用处自动更新，且calc()语义依然保留 - 需要注意：
var(--x)不能直接参与 Less 运算，比如width: var(--x) * 2是非法的。要进一步计算，得依赖 CSS 的clamp()或者 JavaScript
真正容易忽略的是单位混用问题。Less 中 1rem + 10px 会直接报错，必须统一单位才能计算。而 calc() 天然支持跨单位运算——所以别想着让 Less 替 calc() 完成计算工作，让它做好参数组装即可。
