_sass/_mixins.scss

// MIXINS
// --------------------------------------------------

%tab-focus {
	// Default
	outline: thin dotted #333;
	// Webkit
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}


//  Typography
// --------------------------------------------------

/*  Vertical Rhythm
	https://github.com/sturobson/Sassifaction

	In this mixin you can specify the font size in PX and 
	it will calculate the REM based on your $doc-font-size 
	& $doc-line-height variables. 

		@include font-size(24);

	It will also create a bottom margin based on the 
	$doc-font-size & $doc-line-height variables unless you 
	specify that it shouldn't have one.

		@include font-size(24, no);

	Or if you want to specify a different bottom margin to 
	be generated.

		@include font-size(24,32);

	This mixin also generates a pixel-less line height by 
	default unless you specify that you either don't want 
	one where I'd suggest declaring 1 within the mixin.

		@include font-size(24, yes, 1);

	There's also the option to specify a different line-height 
	for it to generate to, where you would specify the 
	line-height in (effectively) it's pixel value.

		@include font-size(24, yes, 40);
*/

@mixin font-size($size, $margin: yes, $line-height: $doc-line-height) {
		
	// generates the font-size in REMs with a PX fallback
	font-size: 0px + $size;
	font-size: 0rem + $size / $doc-font-size;

	// line-height functions
	////////////////////////

	// if you a line-height is specified in the mixin
	@if $line-height != $doc-line-height and $line-height != 1 {
		line-height: ceil($size / $line-height) * ($line-height / $size);
	}
	
	// if $line-height == 1
	// because, typing 1 is quicker than 16
	@else if $line-height == 1 {
		line-height: 1;
	}

	// normal $line-height
	// if the line-height is left.
	@else {
		line-height: ceil($size / $doc-line-height) * ($doc-line-height / $size);
	}

	// margin-bottom functions
	//////////////////////////

	// if no is bottom margin is required
	@if $margin == no {
		margin-bottom: 0;  
	}  
	
	// if a specific bottom margin is required
	@else if $margin != yes and $margin != no {
		margin-bottom: 0px + $margin;
		margin-bottom: 0rem + ($margin / $doc-font-size);  
	}

	// if you're keeping the vertical rhythm with the margin
	@else {
		margin-bottom: 0px + $doc-line-height;
		margin-bottom: 0rem + ($doc-line-height / $doc-font-size);  
	}
}