Less中calc()无法动态解析CSS变量乘除运算，因浏览器原生不支持；须将乘除转为加减组合或用JS/Houdini实现动态计算。
Less里直接用calc()会丢失CSS变量动态性
Less在编译阶段就把calc()里的表达式当纯字符串处理，不会解析其中的var(--x)。比如写width: calc(var(--gap) * 2);，Less原样输出，但浏览器运行时var(--gap) * 2会报错——因为calc()不支持原生CSS变量参与乘除运算。
真正能生效的只有加减和单位换算，例如calc(var(--base) + 10px)可行，但calc(var(--base) * 2)不行。
- 必须把乘除等运算提前在Less层完成，再把结果注入
calc() - 若
--base是动态CSS变量（如通过JS修改），则Less预编译的结果无法响应变化 - 混合使用时，优先级是：Less变量 > CSS变量；运算时机是：Less编译期 > 浏览器运行期
@media内联CSS变量+calc()要手动拼接字符串
Less不支持在calc()中嵌套~""插值与var()混用。下面这种写法会失效：
@gap: 16px;
width: calc(~"var(--gap) + @{gap}"); // ❌ 编译后变成 calc(var(--gap) + 16px)，但--gap未定义时出错
正确做法是分两步：先确保CSS变量有默认值，再用calc()做安全加减。
- 给CSS变量设fallback：
var(--gap, 16px) - 只在
calc()中做单位兼容运算，如calc(var(--gap, 16px) + 8px) - 避免在
calc()里出现var(--x) * 2这类无单位乘法，浏览器不认
用unit()和percentage()辅助单位转换再进calc()
Less的unit()函数能剥离或重设单位，配合calc()可绕过部分限制。比如想让某宽度为CSS变量的1.5倍，但又希望保留响应能力：
@base: 100px;
--width-multiplier: 1.5;
width: calc(@{base} * 1.5); // ✅ Less编译为 calc(150px)
// 或者更灵活：
--base: 100px;
width: calc(~"var(--base, @{base}) * 1.5"); // ❌ 运行时报错
// 正确替代：
width: calc(~"calc(var(--base, @{base}) + var(--base, @{base}) / 2)"); // ✅ 拆成加法
-
unit(@base, px)可提取数值，用于条件判断或比例计算 - 百分比运算建议用
percentage()转成%单位，再喂给calc()，如calc(var(--rate, 50%) + 10%) - 所有乘除逻辑尽量转为加减组合，比如
* 3→+ var(--x) + var(--x)
Vue/React项目中CSS变量更新后calc()不重算的坑
Less生成的CSS是静态的，一旦页面运行中用JS改了document.documentElement.style.setProperty('--gap', '24px')，所有含calc(var(--gap) + 8px)的样式会立即更新，但含calc(var(--gap) * 2)的会卡死——不是Less的锅，是浏览器本身不支持。
- 检查控制台是否报
Invalid property value，大概率是calc()里用了非法运算 - 调试技巧：临时把
var(--x)替换成固定值，看calc()是否正常工作 - 真需要动态乘除，请用JS计算后写入内联
style，或用CSS Houdini（目前兼容性差）
CSS变量和calc()的交集很窄，Less只是放大了这个限制。关键不是“怎么写”，而是“哪些不能写”——别指望calc()能当JS表达式用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
