_baseline.scss

//···············································
// Baseline
//···············································
// based on a gist by Razvan Onofrei: https://gist.github.com/razwan/10662500
// see https://gist.github.com/jeromev/11301969
//
// Example:
//
// body {
//   font-size: $base-font-size;
//   line-height: $base-line-ratio + em;
//   @include show-baseline();
// }
// h1 { @include align-to-baseline(99px, 0, -5); }
// p { @include align-to-baseline(); }

// BASELINE VARS
$base-font-size: 16px;
$base-cap-ratio: 0.53; // this value is to be used with “Fira Sans”. Adjust to your font.
$base-line-ratio: 1.618; // golden ratio
$base-scale: 2; 

// BASELINE CALC
$base-line-height: $base-font-size * $base-line-ratio;
$base-unit: $base-font-size * $base-line-ratio / $base-scale;

// MIXINS
@mixin show-baseline($unit: $base-unit, $color: rgba(0, 0, 0, 0.1667)) {
  background-image: linear-gradient(
    to bottom, 
    $color 0%, 
    transparent 20%
  );
  background-size: 100% rem($base-unit);
  background-position: left top;
}
@mixin align-to-baseline($font-size: $base-font-size, $offset-top: 0, $offset-bottom: 0, $method: 2, $scale: $base-scale) {
  // number (integer) of base units that can fit the font-size
  $lines: ceil($font-size / $base-unit);
	// calculate the new line-height
	$line-height: $base-unit * $lines / $font-size;
  @if ($font-size != $base-font-size) {
    // print the results
	  font-size: rem($font-size);
	  line-height: $line-height + em; 
  }
	$baseline-distance: ($line-height - $base-cap-ratio) / $scale;
	
	$offset-top: $offset-top * $base-unit;
	$offset-bottom: $offset-bottom * $base-unit;
	
	// METHOD 1
	// this method can relatively move down elements you may not want to
	@if ($method == 1) {
	  position: relative;
	  top: rem($baseline-distance * $font-size + $offset-top);
	  padding-bottom: rem($offset-bottom);
	}
	// 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. 
	@if ($method == 2) {
    padding-top: rem($baseline-distance * $font-size + $offset-top);
    margin-bottom: rem(($line-height - $baseline-distance) * $font-size - $base-unit + $offset-bottom);
  }
}