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

问题

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?

回答1:

You could do it like this using min-width/height and max-width/height to avoid mixing units:

@mixin square-size($size, $min: $size, $max: $size) {
  min-width: $min;
  max-width: $max;    
  min-height: $min;
  max-height: $max;    
  width: $size;
  height: $size;
}
.class {
    @include square-size(10vw, 40px, 70px);
} 

回答2:

You would need to bypass the scss compiler & use a literal instead.

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

来源：https://stackoverflow.com/questions/54090345/sass-incompatible-units-vw-and-px