Fluid text (or any other property) size depending on screen width - Cobbled Code

Responsive text styles depending on screen size is all the rage these days.
Here’s an example of a sass mixin that lets you define a screen width where a max value should be reached, and the smallest value it is allowed to have. It will interpolate between these values automatically.

/**
 * Interpolate a value down to a minimum value from its
 * maximum at a defined viewport width
 *
 * @param {string} $property           The css attribute, eg. 'font-size'
 * @param {int}    $value_min          Minimum value in pixels.
 * @param {int}    $value_max          Minimum value in pixels.
 * @param {int}    $viewport_width_max Viewport width for the max value.
 */
@mixin vw-min-max( $property, $value_min, $value_max, $viewport_width_max ) {

	$vw: ( $value_max / $viewport_width_max ) * 100;
	$min_width: ( $value_min / $vw ) * 100;
	$mq_min: #{$min_width}px;
	$mq_max: #{$viewport_width_max}px;

	#{$property}: #{$value_min}px;
	@media all and (min-width: $mq_min) {
		#{$property}: #{$vw}vw;
	}
	@media all and (min-width: $mq_max) {
		#{$property}: #{$value_max}px;
	}
}

For example: A header should have a font-size of 80px at 1000px wide, and grow smaller on narrower screens, but not smaller than 20px.

h2 {
	@include vw-min-max( 'font-size', 20, 80, 1000 );
}

See it in use on my portfolio site, where it is applied not only to text, but also various divs to create a fluid appearance on window resize.