less中无法直接用calc()定义带运算的css变量，需用插值~""将编译期计算结果或显式calc()字符串注入css变量，如--width: ~"calc(100% - @{gap})"；单位混用须在less中统一，calc()才负责运行时跨单位运算。
Less里不能直接用calc()定义带运算的CSS变量
Less编译时会把calc(100% - 2rem)这类表达式原样输出，不会提前计算；而CSS自定义属性（--foo: 100% - 2rem）本身不支持运行时数学运算——浏览器只当它是字符串。所谓“在Less中定义带运算逻辑的CSS变量”，本质是利用Less的变量+插值机制，在编译期完成计算，再注入到CSS变量中。
用@variable配合插值~""生成带计算结果的CSS变量
Less变量支持加减乘除和括号，但要让结果作为CSS变量值生效，必须用插值语法~""包裹，否则会被当作字面量字符串处理。
-
@spacing-base: 1rem;→ 基础单位 -
@header-height: (@spacing-base * 4) + 1px;→ 编译期算出4rem + 1px -
--header-height: ~"@{header-height}";→ 输出--header-height: 4rem + 1px;（注意：这里+未被转义，会导致CSS无效） - 正确写法：
--header-height: ~"@{header-height}";仅适用于纯数值+单位组合；含运算符时得提前拼成合法CSS值，例如：@header-height-value: (4rem + 1px);不行，应改用字符串拼接：@header-height-value: "4rem + 1px";再插值
括号在Less数学运算中只控制优先级，不改变输出格式
写(100% - 2rem)和100% - 2rem在Less里完全等价，括号不会让结果变成可被CSS解析的calc()表达式。想让浏览器运行时计算，必须显式写calc()，且确保它出现在最终CSS中：
- 错误：
--width: @{(100% - 2rem)};→ Less报错，括号不能这样嵌套 - 错误：
--width: (100% - 2rem);→ 输出--width: 100% - 2rem;，CSS无效 - 正确：
--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非法；如需进一步计算，得靠CSSclamp()或JS
真正容易被忽略的是单位混用：Less里1rem + 10px会报错，必须统一单位（如全转为px再算），而calc()天然支持跨单位运算——所以别试图让Less替calc()干活，让它做好参数组装就行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
