Skip to content

Instantly share code, notes, and snippets.

@razwan
Last active November 10, 2018 18:28
Show Gist options
  • Save razwan/c41828a8adfa700acc7fef71c4af2da5 to your computer and use it in GitHub Desktop.
Save razwan/c41828a8adfa700acc7fef71c4af2da5 to your computer and use it in GitHub Desktop.
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;
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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment