SCSS mixin for generate min/max and responsive width based on screen size.

dynamic-width.scss

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function stripUnit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

$baseScreenWidth: 1920;
$minScreenWidth: 1024;
$cardWidthStd: 327;

@function getVWSizeFromPX($pxSize, $screenSize) {
  @return round($pxSize / $screenSize * 100) * 1vw;
}

@function getPXSizeFromVW($vwSize, $screenSize) {
  @return ($screenSize * ( stripUnit($vwSize) / 100 )) * 1px ;
}

@mixin screen-dependent-sizes($width) {
  $width: getVWSizeFromPX($width, $baseScreenWidth);
  
  width: $width;
  min-width: getPXSizeFromVW($width, $minScreenWidth);
  max-width: getPXSizeFromVW($width, $baseScreenWidth); ;
}

.card {
  @include screen-dependent-sizes($cardWidthStd);
}