Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 1</h5>
<h6>Header 1</h6>

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// Modular Scale (v)
// ----

@import "modular-scale";

$ms-base: 1em !default;
$ms-ratio: $golden !default;
$start: 1;
$end: 20;
$mod-scale-debug: false !default;
$base-header-font: sans-serif !default;

%hN {
  font-family: $base-header-font;
	text-rendering: optimizeLegibility; // voodoo to enable ligatures and kerning
	line-height: 1; // this fixes huge spaces when a heading wraps onto two lines
	margin-top: 0;
}

@if ($mod-scale-debug){
  @debug ms-list($start, $end, $ms-base, $ms-ratio);
}

$type-scale:(
  alpha: 5,
  beta: 4,
  gamma:2,
  delta:1,
  epsilon:1,
  zeta:0,
);


@each $type, $size in $type-scale {
 .#{$type} {
   font-size: ms($size);
   @extend %hN;
 } 
}
// Headers
// Styleguide 2.1.3;
h1 {
  @extend .alpha;
}

h2 {
  @extend .beta;
}

h3 {
  @extend .gamma;
}
h4 {
  @extend .delta;
}
h5 {
  @extend .epsilon;
}
h6 {
  @extend .zeta;
}

SassMeister-output.css

.alpha, h1, .beta, h2, .gamma, h3, .delta, h4, .epsilon, h5, .zeta, h6 {
  font-family: sans-serif;
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 0;
}

.alpha, h1 {
  font-size: 11.0901703293em;
}

.beta, h2 {
  font-size: 6.8541021569em;
}

.gamma, h3 {
  font-size: 2.6180340252em;
}

.delta, h4 {
  font-size: 1.618034em;
}

.epsilon, h5 {
  font-size: 1.618034em;
}

.zeta, h6 {
  font-size: 1em;
}

SassMeister-rendered.html

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 1</h5>
<h6>Header 1</h6>