SASS / SCSS responsive font size solution

cheatsheet.scss

/* Responsive Font Sizes */
$breakpoints: (
	large : 980px,
	medium: 767px, // Previously 640px
	between: 600px,
	small : 479px,
	verysmall: 400px
);
@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) {
	@each $fs-breakpoint, $fs-font-size in $fs-map {
		@if $fs-breakpoint == null {
			font-size: $fs-font-size;
		}
		@else {
			// If $fs-font-size is a key that exists in
			// $fs-breakpoints, use the value
			@if map-has-key($fs-breakpoints, $fs-breakpoint) {
				$fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
			}
			@media screen and (max-width: $fs-breakpoint) {
				font-size: $fs-font-size;
			}
		}
	}
}

/* Use like this: */

$h1-font-sizes: (
	null  : 60px,
	large: 52px,
	medium: 46px,
	between: 42px,
	small: 36px
);
h1 { @include font-size($h1-font-sizes); }