Fluid typography Sass mixin

fluid-type.scss

// Modern browsers have support for the CSS clamp function:
// https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

// Source: https://css-tricks.com/snippets/css/fluid-typography/

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

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;

      @media (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }

      @media (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}

strip-unit.scss

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

variables.scss

// Adjust these to your actual min and max breakpoints
$breakpoint-min: 30rem;
$breakpoint-max: 75rem;