Aligning type to baseline the right way with SASS

_baseline.scss

$base-font-size: 	16px;
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {

	// rhythm unit
	$rhythm: $base-line-height * $font-size / $scale;

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

	// calculate the new line-height
	$line-height: $rhythm * $lines / $font-size;

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

	$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 + em;



	// 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
	padding-top: $baseline-distance + em;
	margin-bottom: $base-line-height - $baseline-distance + em;
}

There is a third method—use positive top margin and negative bottom margin. It won’t break due to margin collapsing, because positive+negative margins collapse to their sum. I wrote on article on how to implement that: https://pilot.co/blog/implementing-baseline-rhythm-in-css/

Hi guys!

The main reason It didn't pay too much attention to the activity on this gist is because it was just a proof of concept at the time.
It worked for me and hopefully worked for most people who bumped into it.
As time went by... many tools that do these tiny bits of work for you and that are built in Sass have emerged (ie. http://sassline.com)

@jeromev @sebdesign @dmitriz @yckart thanks for your interest and your effort for moving forward!
@jdudek great article! and thanks for the mention.

@jkinley hope you figured out that the mixin should've been applied on the p element not on the html and that there were some other margins / paddings that would interfere with your rhythm. But if you have other questions feel free to ask. I'll try to be more present 😄