Improved SCSS mixin to easily utilise the proportional type settings chosen using type-scale.com. A streamlining of my previous mixins - https://gist.github.com/doubleedesign/45850d90c80deef79880361f984a3136

_typescales.scss

/*==============================================
TYPE SCALES - inspired by www.type-scale.com
Notes:
- The base font size and line height are set as variables, called in _typography.scss
- H1s are two steps up from H2s to make them stand out more
- Paragraph margins don't change according to type scale used so they are set once in _typography.scss
- The base font size can be changed at different breakpoints and the type will scale accordingly since it's set in ems.
- Breakpoint mixins and/or media queries can be used to change the typescale at different viewports
==============================================*/

// Scales
$minor-second:		1.067;
$major-second:		1.125;
$minor-third:		1.200;
$major-third:		1.250;
$perfect-fourth:	1.333;
$augmented-fourth:  	1.414;
$perfect-fifth:		1.500;
$golden-ratio:		1.618;

// Mixin
@mixin typescale($this_typescale) {

	// Set basics
	h1, h2, h3, h4, h5, h6, p, ul {
		margin-bottom: $global-margin;
	}

	h1, h2, h3, h4 {
		margin-top: #{$this_typescale}em;
		font-weight: inherit;
		line-height: 1.2;

		&:first-child {
			margin-top: 0;
		}
	}

	h1 {
		margin-top: 0;
	}

	// Each size is one step up the type scale from the previous size
	$h4: $this_typescale;
	$h3: $h4*$this_typescale;
	$h2: $h3*$this_typescale;
	$h1: $h2*$this_typescale;

	// Add them to a map so they can be called by the loop
	$sizes: (
		h4: $h4,
		h3: $h3,
		h2: $h2,
		h1: $h1
	);

	// Loop through H1-H4 and assign the default font size from the map
	@for $i from 1 through 4 {
		h#{$i} {
			$this_size: map-get($sizes, h#{$i});
			font-size: #{$this_size}em;
		}
	}

	// Create classes to go up a step than the normal size for this heading level
	// Example usage: Larger H1 in a banner
	@for $i from 1 through 4 {
		h#{$i}.step-up {
			$normal_size: map-get($sizes, h#{$i});
			font-size: #{$normal_size*$this_typescale}em;
		}
	}

}