vertical_rythm.scss

$vr-font-size: 15px !global;
$vr-line-height: 1.5 !global;
$vr-cap-height: 0.6 !global;
$vr-line-scale: 2 !global;

$vr-grid-unit: $vr-line-height * $vr-font-size / $vr-line-scale !global; // (px)

@function em($px: 0, $font-size: $vr-font-size) {
  @return $px / $font-size + em;
}
@function rem($px: 0) {
  @return $px / $vr-font-size + rem;
}
@function grid-units($q: 1) {
  @return rem($q * $vr-grid-unit);
}

@mixin set-vr-font-size($font-size: $vr-font-size, $line-height: $vr-line-height) {
  font-size: $font-size;
  line-height: $line-height + rem;
}

// Display the grid as a background image
@mixin show-baseline($color: rgb(54, 126, 237)) {
  background-image: linear-gradient(
                  to bottom,
                  $color 0%,
                  transparent 5%
  );
  background-size: 100% rem($vr-grid-unit);
  background-position: left top;
}


// based on a gist by Razvan Onofrei: https://gist.github.com/razwan/10662500
// See https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b
// see also https://gist.github.com/jeromev/11301969

@mixin align-to-baseline($font-size: $vr-font-size, $offset-top: 0, $offset-bottom: 0, $method: 'direction-margins', $scale: $vr-line-scale) {
  // integer number of base units that can fit the given font-size
  $lines: ceil($font-size / $vr-grid-unit);
  // calculate the new line-height
  $line-height: $vr-grid-unit * $lines;  // (px)
  $line-height-ratio: $line-height / $vr-font-size;
  // print the results
  font-size: rem($font-size);
  line-height: rem($line-height);
  $baseline-distance: ($line-height-ratio - $vr-cap-height) / $scale * $vr-font-size;  // (px)
  $offset-top: $offset-top * $vr-grid-unit;  // (px)
  $offset-bottom: $offset-bottom * $vr-grid-unit;  // (px)


  @if ($method == 'relatively') {
    position: relative;
    top: em($baseline-distance + $offset-top);
    padding-bottom: em($offset-bottom);
  }

  // http://csswizardry.com/2012/06/single-direction-margin-declarations
  @if ($method == 'direction-margins') {
    padding-top: em($baseline-distance + $offset-top);
    margin-bottom: em($line-height - $baseline-distance - $vr-grid-unit + $offset-bottom);
  }

  @if ($method == 'paddings-only') {
    padding-top: em($baseline-distance + $offset-top);
    padding-bottom: em($line-height - $baseline-distance - $vr-grid-unit + $offset-bottom);
  }
}

.show-baseline {
  @include show-baseline();
}