SASS: Incompatible units: 'vw' and 'px'

Question

How to solve the incompatible units problem?

@mixin square-size($size, $min: $size, $max: $size) {
  $clamp-size: min(max($size, $min), $max);
  width: $clamp-size;
  height: $clamp-size;
}

The input is:

@include square-size(10vw, 40px, 70px);

Problem:

Incompatible units: 'vw' and 'px'.
node_modules\@ionic\app-scripts\dist\util\helpers.js:253.replace(/&/g, '&')

But if I use calc(1vw - 1px) it works. (no unit problem). e.g. max(calc(1vw - 1px)) does not work. Because no number for max.

In my case I want a mixin to square the size of an element. Including clamp. min-width, max-width, etc. does not work. It will be a rect or an ellipse. Because it does not keep the aspect ratio. I want a element with dynamic size but with min and max size.

I understand that the dynamic unit vw (Viewport) must be present after sass compilation. Therefore it is not possible to convert the value to a fixed unit. But is there no way?

Answer 1

I was able to fix the error in React SASS using the calc function.

font-size: calc(max(8vw, 30px));

Answer 2

If you're unable to work around it in any other way, SCSS has a function for ignoring things in quotes:

width: unquote("max(50px, 5rem)");

This will be compiled without the quotes and be valid CSS.

width: max(50px, 5rem);

It will be strange to have this in your scss, but it's a sure-fire way of allowing modern CSS to not interrupt your scss functions