Vertical Rythmn

_rhythm.scss

/* Define your base font-size here; most elements will inherit this. */
$font-size-base: 16;
$line-height-base: 1.5;
$magic: $font-size-base * $line-height-base; /* 24px (This is now our magic number; all subsequent margin-bottoms and line-heights want to be a multiple of this number in order to maintain vertical rhythm.) */

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// By Karl Merkli (https://github.com/Itrulia)
// http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
@mixin rem-fallback($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value*16}px;

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  } 

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 
  
  #{$property}: $pxValues; 
  #{$property}: $remValues; 
}

/*
Calculate line-height to maintain vertical ryhthm.
The returned line-height should always be a multiple of $magic.

Ref:
http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/

Vars:
$magic: $font-size-base * $line-height-base; // 24, established above
$font-size-multiplier ($m is shorthand): The factor by which $font-size-base is either enlarged or reduced
$px: The px value of the modified font-size

Ex:
$magic: 24;
$font-size-multiplier: 5;
$px: $font-size-multiplier * $font-size-base; // 5 * 16 = 80  
((5 - 1) * 24) / 80 // results in 1.2, equivalent to 96px in this context
*/
@mixin line-height($font-size-multiplier) {
  $m: $font-size-multiplier;
  $px: $m * $font-size-base;

  // less than line-height-base
  @if ($m <= $line-height-base) { 
    line-height: $magic / $px;
  } @else {
    // greater than line-height but less than 2
    @if ($m <= 2) {
      $adjust: 0;
    } 
    // greater than 2    
    @else { 
      $adjust: 1;
    }
    line-height: (($m - $adjust) * $magic) / $px;
  } 
}

/* Housekeeping */
*{ margin:0; padding:0; }

html{
    font-size:1em;      /* Assuming 16px... */
    line-height:$line-height-base;    
}

/* Common margin-bottom for vertical rhythm. */
h1,h2,h3,h4,h5,h6,
ul,ol,dl,
fieldset,
p,
table,
pre,
hr{
  @include rem-fallback(margin-bottom, $line-height-base);
}

/* These handle massive type, for less frequently occuring bits of text (e.g. in mastheads and banners). */
.giga{
    $m: 5;
    @include rem-fallback(font-size, $m);
    @include line-height($m);    
}
.mega{
    $m: 4;
    @include rem-fallback(font-size, $m);
    @include line-height($m); 
}
.kilo{
    $m: 3;
    @include rem-fallback(font-size, $m);
    @include line-height($m); 
}

/* Define headings and their associated classes here. */
h1,.alpha{
    $m: 2;
    @include rem-fallback(font-size, $m);
    @include line-height($m); 
}
h2,.beta{
    $m: 1.5;
    @include rem-fallback(font-size, $m);
    @include line-height($m);
}
h3,.gamma{
    $m: 1.25;
    @include rem-fallback(font-size, $m);
    @include line-height($m);
}
h4,.delta{
    $m: 1.125;
    @include rem-fallback(font-size, $m);
    @include line-height($m);
}
h5,.epsilon{
    $m: 1;
    @include rem-fallback(font-size, $m);
    @include line-height($m);
}
h6,.zeta{
    $m: 1;
    @include rem-fallback(font-size, $m);
    @include line-height($m);
}

/* Smaller-than-body-copy sizes here. */
small,.milli {
    $m: 0.75;
    @include rem-fallback(font-size, $m);
    @include line-height($m);
}