A SCSS function to create a fluid value that is clamped between a min and max value.

example.scss

@import "utils/fluid";

.element {
  // Create a fluid value between the viewport widths 375px and 1920px (which are defined as defaults in the function)
  padding: fluid(10px, 40px);
  
  // Create a fluid value between 375px and 1024px
  margin: fluid(10px, 40px, 375px, 1024px);
}

fluid.scss

$min-viewport-width: 375px;
$max-viewport-width: 1920px;

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@function fluid(
  $start-value,
  $end-value,
  $min-vw: $min-viewport-width,
  $max-vw: $max-viewport-width
) {
  $min-value: $start-value;
  $max-value: $end-value;

  @if $end-value < $start-value {
    $min-value: $end-value;
    $max-value: $start-value;
  }

  @return clamp(
    #{$min-value},
    calc(
      #{$start-value} + ((1vw - #{$min-viewport-width / 100}) * #{(
              (strip-unit($end-value - $start-value) / strip-unit($max-vw - $min-vw)) * 100
            )})
    ),
    #{$max-value}
  );
}