Less.js: error evaluating function `min`: incompatible types [duplicate]

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).

Trung0246 · Accepted Answer · 2020-10-26 08:46:59Z

12

+200

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, 2020 at 8:46

Trung0246

6891 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Szymon Przybył Over a year ago

It works for me for calc() calls, but not for min() - still getting ActionView::Template::Error: Incompatible units: '%' and 'px'.

Trung0246 Over a year ago

@SzymonPrzybył, did you check this? github.com/sass/node-sass/issues/2815#issuecomment-575926329

Aaron Thoma Over a year ago

@Trung0246, calc(max(1vw, 2px)) doesn’t work for me. Note that your link refers to Sass, but the question refers to Less.

IbrarMumtaz Over a year ago

Brilliant! this did the trick for me!

Collectives™ on Stack Overflow

Less.js: error evaluating function `min`: incompatible types [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related