clamp() 是原生 css 函数，less 仅原样输出；正确写法为 font-size: clamp(1rem, 4vw, 1.75rem)；变量注入需先拼串再赋值；压缩工具或缺失 viewport 可能导致其失效。
clamp() 不是 Less 的函数，它属于原生 CSS；Less 编译器默认会把它当普通字符串原样输出，但若你误用变量插值、引号包裹或转义，反而会导致语法错误或生成非法 CSS。
Less 把 clamp() 当作普通值，不是函数调用
Less 解析器不识别 clamp() 语义，也不会对它的参数做单位换算或有效性检查。它只负责把这段文本原样写入输出 CSS——前提是写法合法。
- ✅ 正确写法：
font-size: clamp(1rem, 4vw, 1.75rem);—— 没有引号、没有@{}、没嵌套变量，Less 直接透传 - ❌ 错误写法：
font-size: ~"clamp(@{min}, @{ratio}vw, @{max})";——~""内变量不展开，结果输出字面量clamp(@{min}, @{ratio}vw, @{max})，浏览器无法解析 - ❌ 更危险写法：
font-size: clamp(@min, @ratio * 1vw, @max);—— Less 尝试在编译期计算@ratio * 1vw，但单位乘法非法，直接报Operation on an invalid type
变量注入 clamp() 必须分两步：先拼串，再输出
想用 Less 变量控制 clamp() 参数，不能靠运行时插值，必须在编译期拼出完整合法字符串。
- 先定义纯数值或带单位的变量：
@min: 1rem; @ratio: 4; @max: 1.75rem; - 再用
unit()和字符串拼接构造：@clamp-str: ~"clamp(@{min}, @{ratio}vw, @{max})"; - 最后赋值：
font-size: @{clamp-str}; - ⚠️ 注意：
unit()对rem无效（unit(1rem)返回1但丢弃rem），所以@min和@max必须自带单位并手动拼入字符串
构建工具可能二次破坏 clamp() 字符串
某些 Webpack 插件（如 css-minimizer-webpack-plugin）或 PostCSS 插件（如 postcss-csso）会在压缩阶段误判 clamp() 为无效声明而删掉整行，尤其当它出现在 @supports 块内且前面没兜底样式时。
- 验证方法：临时禁用 CSS 压缩，看未压缩 CSS 中
clamp()是否完整存在 - 规避方式：确保
@supports块外已有静态font-size声明，且该声明不含calc()或变量 - 关键点：这类破坏不报错，只静默丢弃，必须靠 DevTools 的 Computed 面板确认最终生效的值是否为
clamp()而非兜底值
真正容易被忽略的是：你写的 clamp() 可能早就进了 CSS 文件，但浏览器根本没执行——因为缺 <meta name="viewport">，或者父容器 font-size 不稳定导致 rem 基准漂移，又或者旧版 Safari 正在静默跳过整条声明。别急着改 Less，先查渲染结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
