Less.js: error evaluating function `min`: incompatible types

Question

I have the following styling in my _main.less file

#mapid {
  width: 100%;
  min-height: min(65vh, 500px);
  max-height: 500px;
}

But the Less compiler complains (using grunt)

>> File "public/less/_main.less" changed.
Running "less:development" (less) task
>> ./public/less/_main.less: [L86:C14] error evaluating function `min`: incompatible types
Warning: Error compiling ./public/less/_main.less Use --force to continue.

Aborted due to warnings.

But this works fine in CSS (see docs).

score 12 · Accepted Answer · answered Oct 26 '20 at 08:46

12

Refer to Disable LESS-CSS Overwriting calc(), you can use escape string in LessCSS:

#mapid {
    width: 100%;
    min-height: ~"min(65vh, 500px)";
    max-height: 500px;
}

answered Oct 26 '20 at 08:46

Trung0246

689
1
10
21

It works for me for `calc()` calls, but not for `min()` - still getting `ActionView::Template::Error: Incompatible units: '%' and 'px'.` – Szymon Przybył Mar 30 '21 at 09:46
@SzymonPrzybył, did you check this? https://github.com/sass/node-sass/issues/2815#issuecomment-575926329 – Trung0246 Mar 30 '21 at 21:43
@Trung0246, `calc(max(1vw, 2px))` doesn’t work for me. Note that your link refers to Sass, but the question refers to Less. – Aaron Thoma Feb 01 '22 at 23:46
Brilliant! this did the trick for me! – IbrarMumtaz May 17 '22 at 15:06

Less.js: error evaluating function `min`: incompatible types

1 Answers1