Skip to content

Instantly share code, notes, and snippets.

@teyepe
teyepe / _baseline-spacing.scss
Created September 27, 2016 21:51 — forked from razwan/_baseline-spacing.scss
SCSS mixin used to achieve consistent spacing between different typographic elements
$baseline-unit: 12px !default;
$baseline-debug: false !default;
@mixin baseline($baseline-font-size: 16px, $baseline-line-height: 1.25, $cap-height-ratio: 0.68, $margin-bottom: 3rem) {
$baseline-distance: ($baseline-line-height - $cap-height-ratio) / 2;
// set the proper font-size and line-height to size the element in multiples of baseline units
font-size: ($baseline-font-size / $baseline-unit) * 1rem;
line-height: $baseline-line-height;