css - 使用带有 LESS 的原生 CSS 最小/最大函数

Question

我想将 min() CSS 函数与用 LESS 编写的样式表一起使用。但是，LESS 有自己的 min 和 max 函数，可以预先计算值（使得混合和匹配单元成为不可能）。我如何获得它，以便输出 CSS 在我编写它们时具有最小/最大功能？

这是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);

标签： cssless

Answer 1

Use LESS' string escaping capabilities to pass along a plain string to the CSS.

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

More info

https://github.com/less/less.js/issues/3463

body {
  background: black;
}

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

<canvas></canvas>