Viewport based (responsive) unit sizing function

/** * $min_size refers to the smallest unit size desired. * $max_size refers to the largest unit size desired. * $min_width refers to the lower bound screen size to apply the range. e.g. min_size will be at this screen size * $max_width refers to the upper bounce screen size to apply the range e.g. max_size will be at this screen size * Example: * * font-size: responsive(12px, 20px, 320px, 900px); <== font size will be 12px at 320px and gradually scale up to 20px * as the viewport reaches 900px. * * NOTE: Since this uses 'calc' you will need to add media queries to cap the min and max sizes to prevent scaling larger or smaller than the min/max sizes. * */ @function responsive($min_size, $max_size, $min_width, $max_width) { $diff_size: $max_size - $min_size; $diff_width: $max_width - $min_width; $diff_size: $diff_size / ($diff_size * 0 + 1); $diff_width: $diff_width / ($diff_width * 0 + 1); @return calc(#{$min_size} + #{$diff_size} * ((100vw - #{$min_width}) / #{$diff_width})); }