如何在LESS中使用原生CSS min/max函数避免编译报错及语法丢失

你可以根据版本情况选择以下任意一种方案实现需求：

• 方案1：使用LESS字符串转义语法（全版本兼容）
  LESS中以~开头的引号包裹内容会被原样输出，编译时自动去掉外层引号，完全避开LESS内置函数的预计算逻辑，修改后的LESS代码如下：

canvas {
    background: white;
    width: ~"min(95vh, 95vw)";
    height: ~"min(95vh, 95vw)";
}

编译后输出的CSS和你期望的原生写法完全一致。

• 方案2：使用css()函数包裹
  LESS提供的css()函数专门用于输出原生CSS语法，不会对包裹的内容做内置函数解析：

canvas {
    background: white;
    width: css("min(95vh, 95vw)");
    height: css("min(95vh, 95vw)");
}

• 方案3：升级LESS到4.0及以上版本
  LESS从4.0版本开始调整了内置min、max函数的处理逻辑：当传入参数的单位不统一无法预计算时，不会抛出错误，而是直接保留原生min/max函数语法输出到CSS，你原本的代码不需要做任何修改就能直接编译通过。

内容的提问来源于stack exchange，提问作者MiffTheFox