title: SASS: Incompatible units: 'vw' and 'px'
body: <p>How to solve the incompatible units problem?</p>
  
  <pre><code>@mixin square-size($size, $min: $size, $max: $size) {
    $clamp-size: min(max($size, $min), $max);
    width: $clamp-size;
    height: $clamp-size;
  }
  </code></pre>
  
  <p>The input is:</p>
  
  <pre><code>@include square-size(10vw, 40px, 70px);
  </code></pre>
  
  <p>Problem:</p>
  
  <pre><code>Incompatible units: 'vw' and 'px'.
  node_modules\@ionic\app-scripts\dist\util\helpers.js:253.replace(/&amp;/g, '&amp;amp;')
  </code></pre>
  
  <p>But if I use <code>calc(1vw - 1px)</code> it works. (no unit problem).
  e.g. <code>max(calc(1vw - 1px))</code> does not work. Because <code>no number for max</code>.</p>
  
  <p>In my case I want a mixin to square the size of an element. Including clamp.
  <code>min-width</code>, <code>max-width</code>, 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 <code>size</code> but with <code>min</code> and <code>max</code> size.</p>
  
  <p>I understand that the dynamic unit <code>vw</code> (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?</p>