fluid-styles.scss

// Fluid Sizing
// Fluidly scales a value between a minimum and maximum (aka "CSS-locks")
//
// Example:
// @include fluid-size(font-size, 320px, 10px, 768px, 24px);
// This will yield a font-size property that smoothly scales between 10px (when the
//   viewport is at 320px) and 24px (when the viewport is at 768px). It won't ever
//   go higher than 24px or lower than 10px.

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

@mixin fluid-size($property, $min-vw, $min-value, $max-vw, $max-value) {
    $u1: unit($min-vw);
    $u2: unit($max-vw);
    $u3: unit($min-value);
    $u4: unit($max-value);

    @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
        & {
            #{$property}: $min-value;
            @media screen and (min-width: $min-vw) {
                #{$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) {
                #{$property}: $max-value;
            }
        }
    }
}