typeplate.scss

$line-height: 1.65 !default;
$font-size: 112.5 !default; // percentage value (16 * 112.5% = 18px)
$font-base: 16 * ($font-size/100) !default; // converts our percentage to a pixel value

$measure: $font-base * $line-height;

// Modular Scale Values
// http://typecast.com/blog/contrast-through-scale
$tera: 117 !default; // 117 = 18 × 6.5
$giga: 90 !default; // 90 = 18 × 5
$mega: 72 !default; // 72 = 18 × 4
$alpha: 60 !default; // 60 = 18 × 3.3333
$beta: 48 !default; // 48 = 18 × 2.6667
$gamma: 36 !default; // 36 = 18 × 2
$delta: 24 !default; // 24 = 18 × 1.3333
$epsilon: 21 !default; // 21 = 18 × 1.1667
$zeta: 18 !default; // 18 = 18 × 1

// typscale unit
$type-scale-unit-value: rem !default;

// $Function $Context Calculator
// -------------------------------------//
// divide a given font-size by base font-size & return a relative value

@function context-calc($scale, $base, $value) {
	@return ($scale/$base)#{$value};
}

// $Function $Measure-Margin
// -------------------------------------//
// divide 1 unit of measure by given font-size & return a relative em value

@function measure-margin($scale, $measure, $value) {
	@return ($measure/$scale)#{$value};
}

// $Mixin $Type-Scale
// -------------------------------------//
// provides a pixel fallback if you decide
// to use 'rems' as a unit over ems.

@mixin type-scale($scale, $base, $value, $measure:"") {
	// If 'rem' is used as a $value then provide a px fallback.
	@if $value == rem {
		font-size: $scale#{px};
	}
	font-size: context-calc($scale, $base, $value);
	@if $measure != "" {
		margin-bottom: measure-margin($scale, $measure, $value);
	}
}

// Extend included classes on any element of your
// choosing for adjusting type based on the scale
// provided.

// For example:

// <h6 class="giga">Awesome Headline</h6>
// <p class="tera">a story about a dude</p>

// Our Type Scale is as follows with px fallbacks
// for IE 6-8 as they do not understand REM units.
//
// 18, 21, 24, 36, 48, 60, 72, 90, 117

// styles for all headings, in the style of @csswizardry
%hN {
	text-rendering: optimizeLegibility; // voodoo to enable ligatures and kerning
	line-height: 1; // this fixes huge spaces when a heading wraps onto two lines
	margin-top: 0;
}

// Multi-dimensional array, where:
// the first value is the name of the class
// and the second value is the variable for the size
$sizes: tera $tera, giga $giga, mega $mega, alpha $alpha, beta $beta, gamma $gamma, delta $delta, epsilon $epsilon, zeta $zeta;

// Sass loop to associate h1-h6 tags with their appropriate greek
// heading based on a modular scale.
// for each size in the scale, create a class
@each $size in $sizes {
	.#{nth($size, 1)} {
		@include type-scale(nth($size, 2), $font-base, '#{$type-scale-unit-value}', $measure);
	}
}

// associate h1-h6 tags with their appropriate greek heading
h1 {
	@extend .alpha;
	@extend %hN;
}

h2 {
	@extend .beta;
	@extend %hN;
}

h3 {
	@extend .gamma;
	@extend %hN;
}

h4 {
	@extend .delta;
	@extend %hN;
}

h5 {
	@extend .epsilon;
	@extend %hN;
}

h6 {
	@extend .zeta;
	@extend %hN;
}