Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

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

@function px2rem($number) {
  @if unit($number) == 'px' {
    @return (strip-units($number) / 16) * 1rem;
  }
  @elseif unit($number) == 'em' or unit($number) == 'rem' {
    // If the unit isn’t a px, we don’t mess with it.
    @return $number;
  }
  @else {
    @warn "Please pass in a number with a px, em, or rem unit."
  }
}

@function rem2px($number) {
  @if unit($number) == 'em' or unit($number) == 'rem' {
    @return (strip-units($number) * 16) * 1px;
  }
  @elseif unit($number) == 'px' {
    // If the unit isn’t a rem or em, we don’t mess with it.
    @return $number;
  }
  @else {
    @warn "Please pass in a number with a px, em, or rem unit."
  }
}

@mixin scalable-font($min, $max) { 
  // Gets an accurate difference in pixels,
  //   then creates a percentage in decimals.
  // Since viewport units are perctages of pixels,
  //   the perc.
  $p: (rem2px($max) - rem2px($min)) * 0.001;

  // Min font size in rem units
  font-size: px2rem($min);

  // Sets the first media query to a rem unit at the screen
  //   size that the min font size is the correct percentage.
  @media (min-width: px2rem(rem2px($min) / strip-units($p))) {
    // Font size based on viewport width.
    // This is the percentage difference.
    font-size: strip-units($p) * 100vw;
  }
  
  // Sets the second media query to a rem unit at the screen
  //   size that the max font size is the correct percentage.
  @media (min-width: px2rem(rem2px($max) / strip-units($p))) {
    // Max font size in rem units
    font-size: px2rem($max);
  }
}


//// THE CSS

p {
  @include scalable-font(1em, 6em);
}

SassMeister-output.css

p {
  font-size: 1em;
}
@media (min-width: 12.5rem) {
  p {
    font-size: 8vw;
  }
}
@media (min-width: 75rem) {
  p {
    font-size: 6em;
  }
}