Responsive Typography Control Mixin

/// Remove the unit of a length /// @param {Number} $number - Number to remove unit from /// @return {Number} - Unitless number /// @link https://css-tricks.com/snippets/sass/strip-unit-function/ @function strip-unit($number) { @if type-of($number) == 'number' and not unitless($number) { @return $number / ($number * 0 + 1); } @return $number; } /// Precise control over responsive typography /// @param {Number} $min-font - Minimum font size with units /// @param {Number} $max-font - Maximum font size with units /// @param {Number} $start-scale - Start of viewport range with units /// @param {Number} $end-scale - End of viewport range with or without units /// @link http://madebymike.com.au/writing/precise-control-responsive-typography/ @mixin relative-font-size($min-font: 12px, $max-font: 24px, $start-scale: 400px, $end-scale: 800px) { $font-difference: strip-unit(abs($max-font - $min-font)); $scale-difference: strip-unit(abs($end-scale - $start-scale)); font-size: calc(#{$min-font} + #{$font-difference} * ((100vw - #{$start-scale}) / #{$scale-difference})); }