Mixin for variable font sizing between a minimum and maximum using media queries and the vw unit.

font-size-range.scss

//
//
// Mixin for variable font sizing between two font sizes with min and max constraints.
//
// Ever want to declare a title to grow from 28px to 60px based on browser width, but always be at least 28px and never
// more than 60px? This SASS mixin does the heavy lifting in terms of math and media queries to figure the necessary CSS
// to do just that.
//
// @code
//   @include loft-sass-font-size-range(28px to 46px at 960px);
// @endcode
//
@mixin font-size-range($declaration) {
  @if (nth($declaration, 2) != 'to' or nth($declaration, 4) != 'at') {
    @error "syntax error: correct format is {min} to {max} at {breakpoint}";
  }

  $_min: nth($declaration, 1);
  $_max: nth($declaration, 3);
  $_breakpoint: nth($declaration, 5);

  @if (unit($_min) != 'px' or unit($_max) != 'px' or unit($_breakpoint) != 'px') {
    @error "all units must be in px";
  }

  @if ($_min > $_max) {
    @error "min cannot be greater than max; correct format is {min} to {max} at {breakpoint}";
  }

  $_variable: $_max / $_breakpoint * 100vw;
  $_min_breakpoint: ceil(100px * ($_min / 1px) / ($_variable / 1vw));

  font-size: $_min;
  @media (min-width: $_min_breakpoint) and (max-width: #{$_breakpoint - 1}) {
    font-size: $_variable;
  }
  @media (min-width: $_breakpoint) {
    font-size: $_max;
  }
}