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.

В моем случае я хочу, чтобы миксин возводил в квадрат размер элемента. Включая зажим. min-width, max-width и т. Д. Не работает. Это будет прямоугольник или эллипс. Потому что не сохраняет соотношение сторон. Я хочу элемент с динамическим size, но с размером min и max.

Я понимаю, что динамическая единица vw (Viewport) должна присутствовать после компиляции sass. Поэтому невозможно преобразовать значение в фиксированную единицу. Но нет ли пути?

Answer 1

Вы можете сделать это следующим образом, используя min-width / height и max-width / height, чтобы избежать смешивания единиц:

@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);
}