SCSS mixin used to achieve consistent spacing between different typographic elements

_baseline-spacing.scss

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

    padding-top: calc(1rem - #{$baseline-distance * 1em});
    padding-bottom: calc(1rem - #{$baseline-distance * 1em});
    margin-bottom: calc(#{$margin-bottom} - 2rem);

    @if $baseline-debug == true {
        position: relative;

        &:before,
        &:after {
            content: "";

            position: absolute;
            top: calc(100% - 1rem);
            left: 0;
            z-index: -1;

            width: 100%;
            height: $margin-bottom;

            background: rgba(0, 128, 255, 0.25);
        }

        &:before {
            background: white;
            top: 1rem;
        }
    }
}