Less Mixin无法运行时测量DOM，仅支持编译期静态计算；安全的.height-diff()需用when守卫、unit()函数处理单位，并输出--height-diff供后续接管。
Less中用Mixin动态计算子元素高度差
直接说结论：Less本身不支持运行时DOM测量，所谓“等高”必须靠CSS机制（如Flexbox/Grid）实现，Mixin只能生成静态计算逻辑，适用于已知高度或需补差值的场景。
比如父容器高度固定，子项内容高度不一，你想让某个footer始终贴底、或给短内容加margin-bottom拉齐视觉高度——这时Mixin才真正有用。
- 别指望
.equal-height()自动读取DOM高度，那是JavaScript的事 - Less Mixin只在编译期工作，所有参数必须是编译期可确定的值（数字、变量、函数返回值）
- 常见误用：把
height: calc(100% - @header-height)写进Mixin却没传参，结果编译报错Undeclared variable: @header-height
写一个安全的等高差值Mixin（带防错和单位处理）
核心是避免单位混用导致calc失效，同时兼容px/em/rem。下面这个Mixin会自动剥离单位、做数值运算、再补回目标单位：
.height-diff(@target-height, @current-height, @unit: px) when (isnumber(@target-height)) and (isnumber(@current-height)) {
@diff: unit(@target-height - @current-height, @unit);
height: ~"calc(@{target-height} - @{current-height})";
// 同时输出差值变量，方便后续用
--height-diff: @diff;
}- 必须用
when守卫判断参数是否为数字，否则遇到@height: 100%会静默失败 -
unit()函数比手动拼字符串更安全，避免100px - 2em这种非法calc表达式 - 输出
--height-diff自定义属性，留给JS或CSS var()后续接管，留出升级路径
和Flexbox/Grid混用时的实际分工
别用Mixin硬刚布局逻辑。真实项目里，“等高”应该由容器控制，Mixin只负责微调：
立即学习“前端免费学习笔记（深入）”；
- 容器用
display: flex，子项自然等高 → 不需要Mixin - 但某个子项内部有
header+content+footer三层，且footer需固定距底20px → 此时用Mixin算content剩余高度 - 如果容器高度来自JS动态设置（如全屏减去顶部导航），那Mixin的参数就得同步从JS注入CSS变量，不能写死
典型错误：在.card { .height-diff(300px, 80px); }里硬设300px，结果响应式下卡片变窄、文字换行导致内容高度突增，差值直接错乱。
浏览器兼容性与降级兜底
calc()在IE9+支持，但IE对单位混用极其敏感（calc(100% - 20px)可以，calc(100% - 2rem)在IE11会失效）。Mixin里若用rem，必须确保根字体大小固定，或改用px保底。
- 推荐做法：Mixin默认用
px，通过@unit参数开放切换，但文档注明“rem需配合固定font-size” - 对老项目，加一句
height: 220px;在calc()之前，让不支持calc的浏览器至少显示基础高度 - 别依赖Mixin生成
@supports规则——Less无法在编译期探测浏览器能力
最常被忽略的一点：Mixin生成的calc表达式一旦嵌套过深（比如三层嵌套计算），Sass/Less编译可能溢出或产生不可读CSS，建议单个Mixin只做一层减法，复杂逻辑拆成多个独立Mixin。
