Less中定义带运算CSS变量及括号强制计算

许多前端从业者在从纯 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() 完成计算工作，让它做好参数组装即可。