Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----

// FONT-FAMILY SETTINGS
$font-georgia: (
  stack: "Georgia, serif",
  
	x-small: (
		font-size: 13,
		line-height: 16
	),

	small: (
		font-size: 14,
		line-height: 20
	),

	base: (
		font-size: 16,
		line-height: 18
	),
  
  mid: (
    font-size: 18,
    line-height: 22
  ),

	mid-large: (
		font-size: 20,
		line-height: 26
	),

	large: (
		font-size: 25,
		line-height: 30
	),

	x-large: (
		font-size: 45,
		line-height: 47
	)
);

$font-verdana: (
    stack: "Verdana, sans-serif", 
  
    x-small: (
		  font-size: 12,
  		line-height: 16
    )
 );

$font-default: $font-georgia;

// FONTSET FUNCTIONS
// This function is intended to be called by other functions 
// and can be used to get information from the Sass list above. 
// The $feature can be any key from the Sass list such as 
// line-height or font-size.
@function _fontset-feature($feature, $family:$font-default, $set: 'base'){
    $result: map-get(map-get($family, $set), $feature);
    @return ($result * 1px);
}

// Sets the family from the stack key in a Sass list
@function fontset-family($family) {
    $result: map-get($family, stack);
    @return unquote($result);
}

// FONT-SIZE + LINE-HEIGHT FUNCTIONS
// These functions return the font-size or line-height 
// depending on the font-family list. To avoid duplication 
// these functions call the fontset-feature function above.

@function calc-font-size($set, $family:$font-default) {
    @return _fontset-feature(font-size, $family, $set);
}

@function calc-line-height($set, $family:$font-default) {
    @return _fontset-feature(line-height, $family,  $set);
}

// FONT-SCALE MIXIN
// Applies the functions above into a mixin so that we can set 
// font-size and line-height at the same time.
// If there is a font-family set there 
// Example: @include font-scale(small, $font-verdana);
@mixin font-scale ($font-size, $family:$font-default, $line-height:$font-size) {
    font-size: calc-font-size($font-size, $family);
    line-height: calc-line-height($line-height, $family);
    @if $family != $font-default {
        font-family: fontset-family($family);
    }
}

// APPLYING THE SCALE

body {
  font-family: fontset-family($font-georgia);
  color: white;
  background-color: #222;
  margin: 0 auto;
  max-width: 600px;
  padding-top: 40px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: normal;
}

dd {
  margin-bottom: 30px;
}

h1, .h1 {
  @include font-scale(x-large);
}

h2, .h2 {
  @include font-scale(large);
}

h3, .h3 {
  @include font-scale(mid-large);
}

h4, .h4 {
  @include font-scale(mid);
}

dt {
  @include font-scale(x-small, $font-verdana);
  margin-bottom: 0;
  color: #666;
  padding-bottom: 0;
  text-transform: uppercase;
}

.banner__heading {
  padding: 10px;
  @include font-scale(x-small, $font-verdana);
  background-color: #68B18B;
  text-transform: uppercase;
  border-radius: 2px;
}

SassMeister-output.css

body {
  font-family: Georgia, serif;
  color: white;
  background-color: #222;
  margin: 0 auto;
  max-width: 600px;
  padding-top: 40px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: normal;
}

dd {
  margin-bottom: 30px;
}

h1, .h1 {
  font-size: 45px;
  line-height: 47px;
}

h2, .h2 {
  font-size: 25px;
  line-height: 30px;
}

h3, .h3 {
  font-size: 20px;
  line-height: 26px;
}

h4, .h4 {
  font-size: 18px;
  line-height: 22px;
}

dt {
  font-size: 12px;
  line-height: 16px;
  font-family: Verdana, sans-serif;
  margin-bottom: 0;
  color: #666;
  padding-bottom: 0;
  text-transform: uppercase;
}

.banner__heading {
  padding: 10px;
  font-size: 12px;
  line-height: 16px;
  font-family: Verdana, sans-serif;
  background-color: #68B18B;
  text-transform: uppercase;
  border-radius: 2px;
}