Responsive values between range.

_mixin_fluid.scss

/* # =================================================================
   # Fluid values
   # ================================================================= */

@mixin fluid($properties, $min-vw, $max-vw, $min-value, $max-value) {
    @each $property in $properties {
        #{$property}: $min-value;
    }
    @media screen and (min-width: $min-vw) {
        @each $property in $properties {
            #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
        }
    }
    @media screen and (min-width: $max-vw) {
        @each $property in $properties {
            #{$property}: $max-value;
        }
    }
}

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

// usage:

/* Single property */

// html {
//   @include fluid(font-size, 320px, 1366px, 14px, 18px);
// }

/* Multiple properties with same values */

// h1 {
//   @include fluid(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }

@mikeabbott10 that's a good question.
I think the easiest way to achieve such a thing might be to use variables

@include fluid(--box-shadow-offset-x, 320px, 1366px, 3px, 10px);
@include fluid(--box-shadow-offset-y, 320px, 1366px, 2px, 5px);
box-shadow: var(--box-shadow-offset-x) var(--box-shadow-offset-x) 5px black;