$base-font-size: 16; $base-viewport-width: 1920; // Given a unitless number and an optional context, calculate a size in rem. // // @param {number} $size A unitless number to convert to a size in rem // @param {number} $context A unitless number that acts as the divisor // @return {number} The size in rem @function rem($size, $context: $base-font-size) { @return ($size / $context) * 1rem; } // Given a unitless number and an optional context, calculate a size in rem. // // @param {number} $size A unitless number to convert to a size in rem // @param {number} $context A unitless number that acts as the divisor // @return {number} The size in rem @function em($size, $context: $base-font-size) { @return ($size / $context) * 1em; } // Given a unitless number and an optional context, calculate a size in vw. // // @param {number} $size A unitless number to convert to a size in vw // @param {number} $context A unitless number that acts as the divisor // @return {number} The size in vw @function vw($size, $context: $base-viewport-width) { @return ($size / $context * 100) * 1vw; }