less中calc()无法直接使用变量，需用插值~"calc(100vh - @{header-height})"实现编译期替换；混用单位、媒体查询重定义变量无效，推荐css自定义属性；注意空格和性能问题。
Less里直接用calc()会丢失变量运算能力
Less编译时会把calc(100vh - @header-height)原样输出，不会提前计算@header-height的值——因为calc()是浏览器运行时处理的，而Less变量替换发生在编译期。结果就是你写了@header-height: 64px，生成的CSS仍是calc(100vh - @header-height)，浏览器不认识这个变量，直接失效。
正确做法是让Less先完成减法，再套进calc()：用插值~"calc(100vh - @{header-height})"，或者更稳妥地拆开写：
@header-height: 64px;
.container {
height: ~"calc(100vh - @{header-height})";
}
注意：~""表示不转义字符串，@{header-height}才会被替换成64px，最终输出calc(100vh - 64px)。
混合使用calc()和Less函数（如percentage()）要小心单位
Less函数返回的是纯数字或带单位的值，但calc()内部只接受带单位的量（如64px、10%）或无单位数字（仅当上下文允许，比如flex: 1）。如果误把percentage(3/5)（返回60%）直接拼进calc()，可能引发语法错误或意料外行为。
常见错误写法：
.sidebar {
width: ~"calc(@{sidebar-width} + #{percentage(3/5)})"; // ❌ percentage()返回"60%"，拼接后变成"calc(240px + 60%)"，合法但语义混乱
}
建议明确分离逻辑：
- 用Less做纯数值计算（如
@ratio: 3 / 5;），再手动补单位 - 或全部交给
calc()在浏览器端算：width: calc(@sidebar-width + 60%)，前提是@sidebar-width已展开为240px - 避免在
calc()里混用不同单位的动态值，比如calc(@px-value + @rem-value)，Less无法校验，浏览器可能拒绝解析
响应式场景下，calc()嵌套媒体查询变量容易失效
Less不支持在@media块内重新定义同名变量并期望它影响外部calc()表达式。例如：
@header-height: 64px;
.container { height: ~"calc(100vh - @{header-height})"; }
<p>@media (max-width: 768px) {
@header-height: 48px; // ✅ 变量重定义生效
// 但上面 .container 的 calc() 已经编译完了，不会重算
}</p>
这种写法无效。真正可行的路径只有两条：
- 为不同断点写独立选择器：
.container.mobile { height: ~"calc(100vh - 48px)"; } - 放弃Less变量，改用CSS自定义属性：
--header-height: 64px;，然后height: calc(100vh - var(--header-height));，再通过媒体查询更新var(--header-height)
后者更现代，也规避了Less编译时机问题，但要求目标浏览器支持CSS变量（IE全系不支持）。
性能提示：过度嵌套calc()可能触发浏览器重排
虽然单个calc(100vh - 64px)毫无压力，但如果大量容器都用calc()配合vmax、vw、频繁变化的CSS变量（比如滚动中实时更新--scroll-y），某些浏览器（尤其是旧版Safari）会对含calc()的属性做更保守的布局判定，导致渲染变慢。
实操建议：
- 静态尺寸尽量用固定值或百分比，别硬套
calc() - 动态高度需求优先考虑
flex: 1或grid布局，比calc()更轻量、更可靠 - 必须用
calc()时，避免在transform、top等会触发布局的属性上高频更新其值
最常被忽略的一点：calc()里的空格不能省——calc(100vh-64px)是非法语法，必须写成calc(100vh - 64px)。Less不会帮你加空格，拼错就等于废掉整条样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
