使用带有 LESS 的原生 CSS min/max 函数

Question

我想将 the min() CSS function 与用 LESS 编写的样式表一起使用。然而，LESS 有自己的 min 和 max 函数来预先计算值（使得混合和匹配单位变得不可能）。我如何获得它以便输出 CSS 具有我编写的 min/max 函数？

这里是LESS文件中的样式，应该也是预期的输出。

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

我正在使用 lessc 3.13.1，它会产生以下错误：

ArgumentError: error evaluating function `min`: incompatible types in <snipped> on line 49, column 12:
48     background: white;
49     width: min(95vh, 95vw);
50     height: min(95vh, 95vw);

Answer 1

使用 LESS 的字符串转义功能将纯字符串传递给 CSS。

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

另请参阅：Less doesn't support new math functions (e.g. min, max) #3463

使用带有 LESS 的原生 CSS min/max 函数

Use native CSS min/max functions with LESS

css

less