5

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);
MiffTheFox
  • 21,302
  • 14
  • 69
  • 94

1 Answers1

8

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)"; 
}

See Also: Less doesn't support new math functions (e.g. min, max) #3463

KyleMit
  • 30,350
  • 66
  • 462
  • 664
mahan
  • 12,366
  • 5
  • 48
  • 83
  • 1
    An unnecessary semicolon has been added to the `width` property. And unfortunately the snippet won't be able to work because it doesn't support LESS. – Gleb Kemarsky Oct 15 '21 at 17:09
  • 1
    That did the trick! I remembered LESS having some sort of syntax like it, but I couldn't find anything about it in the docs. Thanks. – MiffTheFox Oct 16 '21 at 03:38