Sass mixins for vertical rhythm and scoped typography with pixel fallback for IE.

_debug.scss

$debug-rhythm: false;

_mixins.scss

// Generate the margins and line-height
@mixin rhythm($margins: false) {
  @each $name, $size in $scale {

    $rhythm: $measure * ($line-height / $size);

    // Reduce the line-height to base line-height
    // if the rhythm is greater
    @if ($rhythm > $line-height) {
      $rhythm: $line-height;
    }

    // Increase the line-height if the rhythm is less than 1
    // Might break vertical rhythm but looks better visually
    @if ($rhythm < 1) {
      $rhythm: 1;
    }

    // Generate classes dynamically
    .#{$name} {
      // Margins and line-height are to allow
      // scoping within different .context__* classes
      @if ($margins == true) {
        // Use REM function to provide IE fallback
        margin-bottom: rem($rhythm * $font-base);
        line-height: $rhythm;
      }
      @else {
        line-height: $rhythm;
      }
    }
  }
}

// Generate the font sizes
@mixin scale() {
  @each $name, $size in $scale {
    .#{$name} {
      font-size: rem($size);
      text-rendering: optimizeLegibility;
    }
  }
}

// Generate the font weights
@mixin weight() {
  @each $name, $value in $weight {
    .#{$name} {
      font-weight: $value;
    }
  }
}

// Extend scale to root headings
@mixin headings() {
  @each $h, $size in $headings {
    #{$h} {
      @extend .#{$size};
    }
  }
}

_type.scss

// Generate classes using mixins
@include scale;
@include headings;
@include weight;

// Add a context just for maintaining rhythm with line-height and no margins
.context__rhythm {
  
  // Use a lined background to test the rhythm
  @if ($debug-rhythm == true) {
    background-image: url(http://basehold.it/i/#{$measure}); // 18px * 1.5
  }

  // Generate the line-height
  @include rhythm;
}


// Add a context just for adding margins but only
// allow it to be used when we're already maintain a rhythm with line-heights
.context__rhythm {

  .context__margins,
  &.context__margins {

    @include rhythm(true);

    ul,ol,dl,blockquote,p,pre,iframe,
    .gallery__thumb {
      margin-bottom: $baseline;
    }

  }

}


// Add typographical flare and bullets
// Nothing within should add margins
.context__copy {

  ul {
    list-style: disc;
    margin-left: $baseline;
  }

}

_utilities.scss

// PX to REM Calculator
@function rem($size) {

  // Return pixels if IE
  @if ($old-ie == true) {
    @return $size *1px;
  }

  // Otherwise use REMS
  @else {
    @return ($size / $font-base) * 1rem;
  }

}

_vars.scss

$old-ie: false;

$line-height: 1.5;
$font-size: 112.5; // percentage value (16 * 112.5% = 18px)
$font-base: 16 * ($font-size/100);
$measure: $font-base * $line-height;

// Use modularscale.com to generate a list of font-sizes
$scale: (
  tera: 91,
  giga: 72,
  mega: 60,
  alpha: 48,
  bravo: 40,
  charlie: 32,
  delta: 24,
  echo: 21,
  foxtrot: 18,
  golf: 14,
  hotel: 12
);

// Assign sizes to elements
$headings: (
  h1: mega,
  h2: alpha,
  h3: bravo,
  h4: charlie,
  h5: delta,
  h6: echo
);

// Class names => weights
$weight: (
  light: 300,
  normal: 400,
  semi-bold: 600,
  bold: 700,
  ultra-bold: 900
);

old-ie.scss

// Compile this stylesheet as well as styles.scss and include with IE conditional comments

// Use pixels
$old-ie: true;

// Import the normal stylsheet but it will contain different rules
// becuase of the $old-ie flag set as `true` in this stylesheet.
@import "style";

style.scss

@import "vars";
@import "utilities";
@import "mixins";
@import "type";