SASS:不兼容的单位: 'vw' 和 'px'

Question

如何解决不兼容的单位问题？

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

输入是:

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

问题:

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

但是如果我使用 calc(1vw - 1px)有用。 (没有单位问题)。
例如max(calc(1vw - 1px))不起作用。因为no number for max .

在我的情况下，我想要一个 mixin 来平方元素的大小。包括夹子。min-width , max-width等不起作用。它将是一个矩形或一个椭圆。因为它不保持纵横比。
我想要一个动态的元素 size但与 min和 max尺寸。

我了解动态单位vw (视口(viewport))必须在 sass 编译后出现。因此，无法将该值转换为固定单位。
但是没有办法吗？

Answer 1

我能够使用 calc 函数修复 React SASS 中的错误。

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