Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

/* http://24ways.org/2011/composing-the-new-canon/ !*/

// Need to write cent calculator so that the font-size for the notes can all be based on cents

$notes: (
  "small": (
    font-size: 0.850,
    line-height: 1,
    padding-top: 0.75,
    padding-bottom: 0.25,
    font-weight: normal,
    font-style: normal
  ),

  "unison": (
    font-size: 1.000,
    line-height: 2,
    padding-top: 0.75,
    padding-bottom: 0.25,
    font-weight: normal,
    font-style: normal
  ),

  "second-minor": (
    font-size: 1.067,
    line-height: 2,
    padding-top: 0.60,
    padding-bottom: 0.40,
    font-weight: normal,
    font-style: normal
  ),

  "second": (
    font-size: 1.125,
    line-height: 2,
    padding-top: 0.60,
    padding-bottom: 0.40,
    font-weight: bold,
    font-style: normal
  ),

  "third-minor": (
    font-size: 1.200,
    line-height: 2,
    padding-top: 0.60,
    padding-bottom: 0.40,
    font-weight: normal,
    font-style: normal
  ),

  "third-major": (
    font-size: 1.250,
    line-height: 2,
    padding-top: 0.55,
    padding-bottom: 0.45,
    font-weight: bold,
    font-style: normal
  ),

  "fourth-perfect": (
    font-size: 1.330,
    line-height: 2,
    padding-top: 0.50,
    padding-bottom: 0.5,
    font-weight: bold,
    font-style: normal
  ),

  "fourth-augmented": ( 
    font-size: 1.414,
    line-height: 2,
    padding-top: 0.55,
    padding-bottom: 0.45,
    font-weight: bold,
    font-style: italic
  ),

  "fifth-diminished": (
    font-size: 1.414,
    line-height: 2,
    padding-top: 0.55,
    padding-bottom: 0.45,
    font-weight: bold,
    font-style: normal
  ),

  "fifth-perfect": (
    font-size: 1.500,
    line-height: 2,
    padding-top: 0.47,
    padding-bottom: 0.54,
    font-weight: bold,
    font-style: normal
  ),

  "sixth-minor": (
    font-size: 1.620,
    line-height: 2,
    padding-top: 0.38,
    padding-bottom: 0.6,
    font-weight: normal,
    font-style: normal
  ),

  "sixth-major": (
    font-size: 1.667,
    line-height: 2,
    padding-top: 0.35,
    padding-bottom: 0.65,
    font-weight: bold,
    font-style: normal
  ),

  "seventh-minor": (
    font-size: 1.778,
    line-height: 2,
    padding-top: 0.41,
    padding-bottom: 0.59,
    font-weight: normal,
    font-style: normal
  ),

  "seventh-major": (
    font-size: 1.875,
    line-height: 2,
    padding-top: 0.25,
    padding-bottom: 0.75,
    font-weight: bold,
    font-style: normal
  ),

  "octave": (
    font-size: 2.000,
    line-height: 2,
    padding-top: 0.22,
    padding-bottom: 0.75,
    font-weight: bold,
    font-style: normal
  ),

  "ninth-minor": (
    font-size: 2.134,
    line-height: 3,
    padding-top: 0.68,
    padding-bottom: 0.30,
    font-weight: normal,
    font-style: normal
  ),

  "ninth": (
    font-size: 2.250,
    line-height: 3,
    padding-top: 0.72,
    padding-bottom: 0.26,
    font-weight: bold,
    font-style: normal
  ),

  "ninth-augmented": (
    font-size: 2.400,
    line-height: 3,
    padding-top: 0.54,
    padding-bottom: 0.45,
    font-weight: bold,
    font-style: italic
  ),

  "tenth-major": (
    font-size: 2.500,
    line-height: 3,
    padding-top: 0.55,
    padding-bottom: 0.45,
    font-weight: bold,
    font-style: normal
  ),

  "eleventh-major": (
    font-size: 2.660,
    line-height: 3,
    padding-top: 0.67,
    padding-bottom: 0.34,
    font-weight: bold,
    font-style: normal
  ),

  "twelfth": (
    font-size: 3.000,
    line-height: 3,
    padding-top: 0.39,
    padding-bottom: 0.60,
    font-weight: bold,
    font-style: normal
  )
);

@function note($note) {
  @if not map-has-key($notes, $note) {
    @warn "Unknown note `#{$note}`.";
  }

  @return map-get($notes, $note);
}

$chords: (
  "min": (
    "headings": note("fifth-perfect") note("third-minor") note("third-minor") note("third-minor"),
    "else": note("third-minor")
  ),

  "maj": (
    "headings": note("fifth-perfect") note("third-major") note("third-major") note("third-major"),
    "else": note("third-major")
  ),

  "dim": (
    "headings": note("fifth-diminished") note("third-minor") note("third-minor") note("third-minor"),
    "else": note("third-minor")
  ),

  "aug": (
    "headings": note("sixth-minor") note("third-major") note("third-major") note("third-major"),
    "else": note("third-major")
  ),

  "augmin7": (
    "headings": note("seventh-minor") note("sixth-minor") note("third-major") note("third-major"),
    "else": note("third-major")
  ),

  "sus": (
    "headings": note("fifth-perfect") note("fourth-perfect") note("fourth-perfect") note("fourth-perfect"),
    "else": note("fourth-perfect")
  ),

  "sus2": (
    "headings": note("fifth-perfect") note("second") note("second") note("second"),
    "else": note("second")
  ),

  "eleventh": (
    "headings": note("eleventh-major") note("ninth") note("seventh-minor") note("fifth-perfect"),
    "else": note("third-major")
  ),

  "min7": (
    "headings": note("seventh-minor") note("fifth-perfect") note("third-major") note("third-minor"),
    "else": note("third-minor")
  ),

  "maj7": (
    "headings": note("seventh-major") note("fifth-perfect") note("third-major") note("third-major"),
    "else": note("third-major")
  ),

  "dom7": (
    "headings": note("seventh-minor") note("fifth-perfect") note("third-minor") note("third-minor"),
    "else": note("third-minor")
  ),

  "dim7": (
    "headings": note("seventh-minor") note("fifth-diminished") note("third-minor") note("third-minor"),
    "else": note("third-minor")
  ),

  "min6": (
    "headings": note("sixth-major") note("fifth-perfect") note("third-minor") note("third-minor"),
    "else": note("third-minor")
  ),

  "maj6": (
    "headings": note("sixth-major") note("fifth-perfect") note("third-major") note("third-major"),
    "else": note("third-major")
  ),

  "domflat9": (
    "headings": note("ninth-minor") note("seventh-minor") note("fifth-perfect") note("third-major"),
    "else": note("third-major")
  ),

  "domsharp9": (
    "headings": note("ninth-augmented") note("seventh-minor") note("fifth-perfect") note("third-major"),
    "else": note("third-major")
  ),

  "min9": (
    "headings": note("ninth") note("seventh-minor") note("fifth-perfect") note("third-minor"),
    "else": note("third-minor")
  ),

  "maj9": (
    "headings": note("ninth") note("seventh-major") note("fifth-perfect") note("third-major"),
    "else": note("third-major")
  ),

  "perfect5": (
    "headings": note("fifth-perfect") note("fifth-perfect") note("fifth-perfect") note("fifth-perfect"),
    "else": note("fifth-perfect")
  )
);



@function typography($element, $quality: "maj") {
  @if $element == "p" {
    @return note("unison");
  }

  @else if $element == "small" { 
    @return note("small");
  }

  @else {
    $index: index("h1" "h2" "h3" "h4", $element);

    @if $index {
      @return nth(map-get(map-get($chords, $quality), "headings"), $index);
    }

    @return map-get(map-get($chords, "min"), "else");
  }
}

// The Font Properties Mixin
//
// Use: 
// h1{
//    @include font-properties-for(h1);
// }
//
// The font-properties-for mixin combines all font styles into a single mixin.
// It requires the typography mixin to be loaded, as it calls it for each property.
// By specifying an optional second variable(0-1), you can scale the output. 
//
// Later versions will initialize the typographic variables into a mapped array

@mixin font-properties-for($element, $multiplier: 1) {
  $note: typography($element);
  @each $property, $value in $note {
    @if type-of($value) == number {
      #{$property}: $value * 1rem * $multiplier;
    }
    @else {
      #{$property}: $value;
    }
  }
  margin: 0;
}

h1{
  @include font-properties-for(h1);
}

SassMeister-output.css

/* http://24ways.org/2011/composing-the-new-canon/ !*/
h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  padding-top: 0.47rem;
  padding-bottom: 0.54rem;
  font-weight: bold;
  font-style: normal;
  margin: 0;
}