base_defaults

//------------------------------------*\
//  $BASE-DEFAULTS
//------------------------------------*/

:root {
  font: 400 #{($base-font-size/16px)*1em}/#{$base-line-height/$base-font-size} $base-font-family;
}

base_typography.scss

//------------------------------------*\
//  $BASE-TYPOGRAPHY
//------------------------------------*/

/**
 * Headings
 */

h1, .alpha, %alpha,
h2, .beta, %beta,
h3, .gamma, %gamma,
h4, .delta, %delta,
h5, .epsilon, %epsilon,
h6, .zeta, %zeta {
  margin-top: 0;
  font-family: $base-font-family;
  font-weight: bold;
  color: $colour-black;
}

h1, .alpha, %alpha {
  @include font-size(32px, 1);

  @include media-query(portable) {
    @include font-size(48px, 1);
  }
}

h2, .beta, %beta {
  @include font-size(25px, 1);

  @include media-query(portable) {
    @include font-size(38px, 1);
  }
}

h3, .gamma, %gamma {
  @include font-size(20px, 1);

  @include media-query(portable) {
    @include font-size(30px, 1);
  }
}

h4, .delta, %delta,
h5, .epsilon, %epsilon,
h6, .zeta, %zeta {
  @include font-size(20px, 1);

  @include media-query(portable) {
    @include font-size(30px, 1);
  }
}



/**
 * Extra large sizes
 */

.mega, %mega {
  @include media-query(desk) {
    @include font-size(64px, 1.2);
  }
}



/**
 * Paragraph
 */

p, ul, ol, .body-copy {
  @include font-size($base-font-size, 1.375);

  @include media-query(portable) {
    @include font-size($base-font-size * 1.5, 1.375);
  }
}

settings_base.scss

//------------------------------------*\
//  $SETTINGS-BASE
//------------------------------------*/

$base-font-family: 'europa', 'Quicksand', 'Helvetica Neue', Helvetica, Arial;
$base-font-size:  16px;
$base-line-height:  22px;
$colour-black: #000;

settings_responsive.scss

//------------------------------------*\
//  $SETTINGS-RESPONSIVE
//------------------------------------*/

$breakpoints: (
  'palm'      '(max-width: 480px)',
  'portable'  '(min-width: 480px)',
  'desk'      '(min-width: 800px)',
  'retina'    '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
);

tools_font-size.scss

//------------------------------------*\
//  $TOOLS-FONT-SIZE
//------------------------------------*/

// Font sizing mixin - calculates font-size in rems with px fallback and
// line-height ratio based on default baseline height

@mixin font-size($font-size, $line-height: auto) {
  font-size:$font-size;
  font-size:($font-size / $base-font-size) * 1rem;

  @if $line-height == auto {
    line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
  }

  @else {

    @if (type-of($line-height) == number or $line-height == inherit or $line-height == normal) {
      line-height:$line-height;
    }

    @elseif ($line-height == none or $line-height == false) {
    }

    @else {
      @warn "‘#{$line-height}’ is not a valid value for `line-height`.";
    }

  }

}

tools_responsive.scss

//------------------------------------*\
//  $TOOLS-RESPONSIVE
//------------------------------------*/

// A simple mixin to quickly generate whole media queries from the aliases and
// conditions defined in `settings/_responsive.scss`.

@mixin media-query($mq) {

  $breakpoint-found: false;

  // Loop through the list of breakpoints we’ve provided in our settings file.
  @each $breakpoint in $breakpoints {

    // Grab the alias and the condition from their respective locations in
    // the list.
    $alias:     nth($breakpoint, 1);
    $condition: nth($breakpoint, 2);

    // If the media query we’ve specified has an alias and a condition...
    @if $mq == $alias and $condition {

      // ...tell the mixin that we’ve found it...
      $breakpoint-found: true;

      // ...and spit it out here.
      @media #{$condition} {
        @content;
      }
    }
  }

  // If the user specifies a non-exitent alias, send them a warning.
  @if $breakpoint-found == false {
    @warn "Oops! Breakpoint ‘#{$mq}’ does not exist."
  }
}