Aligning type to baseline the right way with SASS

_baseline.scss

// font-size of the regular font used
$base-font-size: 	16px;

// it is convenient to declare a fixed base-line-height,
// so every other line-height is a simple multiple of base-line-height
$base-line-height: 	21px;	// 1.5 * base-font-size

// allow fractional line-height as integer multiple of base-line-height / line-height-scale
$line-height-scale: 1;

// rhythm is that fraction of the base-line-height 
$rhythm: $base-line-height / $line-height-scale;

// The height of a capital letter for the typeface chosen (may vary)
// https://en.wikipedia.org/wiki/Cap_height
// Usually about 0.7em (see http://jsbin.com/gofexi/edit?html,css,output)
$font-cap-height: 	0.7em;

@mixin baseline($font-size) {

	// number of rhythm units that can fit the font-size
	$lines: ceil(($font-size + 0.001px) / $rhythm);

	// set the new line-height 
	// to be the minimum integer multiple of $rythm exceeding current $font-size
	$line-height: $lines * $rhythm;

	// use the results
	font-size: $font-size;
	line-height: $line-height;

	// distance between current font's baseline and its box bottom edge 
	$baseline-distance: ($line-height - $cap-height) / 2;
	
	

	// METHOD 1
	/////////////////

	// this method can relatively move down elements you may not want to
	
	// position: relative;
	// top: $baseline-distance;



	// METHOD 2
	/////////////////

	// if you use this mixin only on elements that have one direction margins
	// http://csswizardry.com/2012/06/single-direction-margin-declarations/
	// you can use this method with no worries. 
	// this method assumes the direction is down and the margin is $base-line-height
	
	// move current font baseline down to the previous position of the box bottom edge,
	// which is integer multiple of $rhytm away from the top,
	// assuming the mixing has been consistently applied above:
	padding-top: $baseline-distance;
	
	// ensure the next box top edge is $line-height + $base-line-height below the current box top edge
	// in particular, the next box top edge falls onto our grid 
	// (i.e. integer multiple of $rhythm away from the top edge)
	margin-bottom: $base-line-height - $baseline-distance;
}