Responsive font sizes #scss

responsive-font-size.scss

$font-size-base: 16px !default;

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

@function pxToRem($value) {
  @return $value / $font-size-base * 1rem;
}

/*
 * Adapted from
 * - https://css-tricks.com/snippets/css/fluid-typography/
 * - https://github.com/seaneking/postcss-responsive-type
 *
 * usage: 
 * .foo {
 *   @include fluid-type(400px, 1200px, 3rem, 3.5rem);
 * }
 */
@mixin fluid-type($min-width, $max-width, $min-font-size, $max-font-size) {
  $u1: unit($min-width);
  $u2: unit($max-width);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u3 == $u4 {
    @if $u1 == 'px' and $u3 == 'rem' {
      $min-width: pxToRem($min-width);
      $max-width: pxToRem($max-width);
    }
    & {
      font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-width}) / #{strip-unit($max-width - $min-width)}));
      @media screen and (max-width: $min-width) {
        font-size: $min-font-size;
      }
      @media screen and (min-width: $max-width) {
        font-size: $max-font-size;
      }
    }
  } @else {
    @error 'wrong unit combination. E.g. use px for the widths and rem for the font-sizes.'
  }
}