I want to use the min() CSS function with a stylesheet written in LESS. However, LESS has its own min and max functions that precompute values (making it impossible to mix-and-match units). How do I get it so the output CSS has the min/max functions as I wrote them?
Here is the style in the LESS file, which should also be the expected output.
canvas {
background: white;
width: min(95vh, 95vw);
height: min(95vh, 95vw);
}
I am using lessc 3.13.1, which produces the following error:
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);
CodePudding user response:
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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>