less 无法在编译期处理 vw/vh 单位，因其为浏览器运行时解析的相对单位；正确做法是用 ~"" 转义拼接 calc() 或 clamp() 字符串，由浏览器计算。
Less 无法直接处理 vw/vh 这类视口单位的动态转换
Less 所有数学函数（percentage()、round()、math.div() 等）都在编译期运行，而 vw、vh 是浏览器运行时才解析的相对单位。你写 width: percentage(50vw) 会直接报错 —— 因为 50vw 是带单位表达式，percentage() 只接受纯数字。
-
50vw、100vh在 Less 里不被视为可计算数值，而是 CSS 原生 token，编译器不会拆解它 - 试图用
unit(50vw, %)或math.div(100vw, 2)都会失败：前者参数类型不合法，后者单位不可约分 - 所有含
vw/vh的表达式必须原样交给浏览器，不能参与 Less 数学运算链
正确做法：用 ~"" 转义 + 变量插值生成 calc() 表达式
真正可控的路径是让 Less 拼出合法的 calc() 字符串，由浏览器 runtime 计算。关键不是“Less 算 vw”，而是“Less 输出能被浏览器算的字符串”。
- 必须用
~"..."包裹整个表达式，否则 Less 会尝试解析+、-、vw等内容 - 变量需用
@{var}插值，且@var必须是已计算好的带单位值（如@base: 16px），不能是未求值表达式 - 示例：
font-size: ~"calc(@{min-font} + (@{scale} * (100vw - @{min-vw}))";—— 注意括号闭合和引号位置 - 避免在
~""内写@{gap} * 2这类运算：Less 不会在字符串内执行计算，结果是字面拼接
单位混合场景下，优先用 clamp() 替代 calc() 复杂公式
如果你的目标是响应式字体或宽度（比如 “最小 16px，最大 48px，中间线性缩放”），clamp() 比手写 calc() 更健壮，也更易维护。
-
clamp(16px, 4vw, 48px)浏览器原生支持，无需 Less 参与计算 - Less 只需负责输出该字符串：
font-size: ~"clamp(@{min}, @{ratio}vw, @{max})"; - 注意：旧版浏览器不支持
clamp()，若需兼容 IE 或 Safari calc() + 媒体查询双保险 - 不要试图用 Less 函数模拟
clamp()行为 —— 它依赖运行时视口测量，Less 无法生成等效逻辑
容易被忽略的精度与基准一致性问题
即使你成功输出了 calc(1rem + 1vw)，实际渲染效果仍取决于根元素 font-size 是否稳定。Less 编译时假设的 1rem = 16px，和页面运行时 JS 动态设置的 document.documentElement.style.fontSize = '18.75px' 之间存在隐性偏差。
- 如果项目用了动态根字体（如基于屏幕宽度重设），Less 里所有基于
@base-font-size: 16px的转换都会失准 -
unit(20px, rem)默认按 16px=1rem 换算，但若运行时根字体是 20px，结果就是 1rem → 20px，而非预期的 1.25rem - 真正可靠的方案是：放弃在 Less 里硬编码基准，改用
:root { font-size: clamp(16px, 2.5vw, 24px); }，再让所有 rem 值自然跟随 - 任何试图用 Less “预估”视口单位行为的做法，本质都是静态近似，不是真实响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
