Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="xsml">
  <h1 class="alpha">This is a heading</h1>
  <h2 class="beta">This is a heading</h2>
  <h3 class="gamma">This is a heading</h3>
  <h4 class="delta">This is a heading</h4>
  <h5 class="epsilon">This is a heading</h5>
  <h6 class="zeta">This is a heading</h6>
</div>

<div class="sml">
  <h1 class="alpha">This is a heading</h1>
  <h2 class="beta">This is a heading</h2>
  <h3 class="gamma">This is a heading</h3>
  <h4 class="delta">This is a heading</h4>
  <h5 class="epsilon">This is a heading</h5>
  <h6 class="zeta">This is a heading</h6>
</div>

<div class="med">
  <h1 class="alpha">This is a heading</h1>
  <h2 class="beta">This is a heading</h2>
  <h3 class="gamma">This is a heading</h3>
  <h4 class="delta">This is a heading</h4>
  <h5 class="epsilon">This is a heading</h5>
  <h6 class="zeta">This is a heading</h6>
</div>

<div class="lrg">
  <h1 class="alpha">This is a heading</h1>
  <h2 class="beta">This is a heading</h2>
  <h3 class="gamma">This is a heading</h3>
  <h4 class="delta">This is a heading</h4>
  <h5 class="epsilon">This is a heading</h5>
  <h6 class="zeta">This is a heading</h6>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// x-small
$major-second: (
	alpha: 1.602,
	beta: 1.424,
	gamma: 1.266,
	delta: 1.125,
	epsilon: 1.063,
	zeta: 1
);

// small
$major-third: (
	alpha: 2.441,
	beta: 1.953,
	gamma: 1.563,
	delta: 1.25,
	epsilon: 1.125,
	zeta: 1
);

// Med
$perfect-fourth: (
	alpha: 3.157,
	beta: 2.369,
	gamma: 1.777,
	delta: 1.333,
	epsilon: 1.166,
	zeta: 1
);

// Large
$perfect-fifth: (
	alpha: 5.063,
	beta: 3.375,
	gamma: 2.25,
	delta: 1.5,
	epsilon: 1.25,
	zeta: 1
);



@mixin heading-size( $scale: $perfect-fourth ){

	.alpha,
	.beta,
	.gamma,
	.delta,
	.epsilon,
	.zeta {
		margin-top: 0;
		margin-bottom: $base-font-size; // rem fallback
		margin-bottom: .9rem;
		line-height: 1.2;
	}

	@each $heading, $size in $scale {

		.#{$heading} {
			@include font-size( $base-font-size * $size );
		}
	}

}

@mixin font-size($font-size) {

	// Initial value set in px, fallback for browsers that don’t support REM
	font-size: $font-size;
	// REM calculated value
	font-size: ($font-size / $base-font-size) * 1rem;
}
$base-font-size: 16px;

.xsml {
  @include heading-size($major-second);
}
.sml {
  @include heading-size($major-third);
}
.med {
  @include heading-size($perfect-fourth);
}
.lrg {
  @include heading-size($perfect-fifth);
}

SassMeister-output.css

.xsml .alpha,
.xsml .beta,
.xsml .gamma,
.xsml .delta,
.xsml .epsilon,
.xsml .zeta {
  margin-top: 0;
  margin-bottom: 16px;
  margin-bottom: .9rem;
  line-height: 1.2;
}

.xsml .alpha {
  font-size: 25.632px;
  font-size: 1.602rem;
}

.xsml .beta {
  font-size: 22.784px;
  font-size: 1.424rem;
}

.xsml .gamma {
  font-size: 20.256px;
  font-size: 1.266rem;
}

.xsml .delta {
  font-size: 18px;
  font-size: 1.125rem;
}

.xsml .epsilon {
  font-size: 17.008px;
  font-size: 1.063rem;
}

.xsml .zeta {
  font-size: 16px;
  font-size: 1rem;
}

.sml .alpha,
.sml .beta,
.sml .gamma,
.sml .delta,
.sml .epsilon,
.sml .zeta {
  margin-top: 0;
  margin-bottom: 16px;
  margin-bottom: .9rem;
  line-height: 1.2;
}

.sml .alpha {
  font-size: 39.056px;
  font-size: 2.441rem;
}

.sml .beta {
  font-size: 31.248px;
  font-size: 1.953rem;
}

.sml .gamma {
  font-size: 25.008px;
  font-size: 1.563rem;
}

.sml .delta {
  font-size: 20px;
  font-size: 1.25rem;
}

.sml .epsilon {
  font-size: 18px;
  font-size: 1.125rem;
}

.sml .zeta {
  font-size: 16px;
  font-size: 1rem;
}

.med .alpha,
.med .beta,
.med .gamma,
.med .delta,
.med .epsilon,
.med .zeta {
  margin-top: 0;
  margin-bottom: 16px;
  margin-bottom: .9rem;
  line-height: 1.2;
}

.med .alpha {
  font-size: 50.512px;
  font-size: 3.157rem;
}

.med .beta {
  font-size: 37.904px;
  font-size: 2.369rem;
}

.med .gamma {
  font-size: 28.432px;
  font-size: 1.777rem;
}

.med .delta {
  font-size: 21.328px;
  font-size: 1.333rem;
}

.med .epsilon {
  font-size: 18.656px;
  font-size: 1.166rem;
}

.med .zeta {
  font-size: 16px;
  font-size: 1rem;
}

.lrg .alpha,
.lrg .beta,
.lrg .gamma,
.lrg .delta,
.lrg .epsilon,
.lrg .zeta {
  margin-top: 0;
  margin-bottom: 16px;
  margin-bottom: .9rem;
  line-height: 1.2;
}

.lrg .alpha {
  font-size: 81.008px;
  font-size: 5.063rem;
}

.lrg .beta {
  font-size: 54px;
  font-size: 3.375rem;
}

.lrg .gamma {
  font-size: 36px;
  font-size: 2.25rem;
}

.lrg .delta {
  font-size: 24px;
  font-size: 1.5rem;
}

.lrg .epsilon {
  font-size: 20px;
  font-size: 1.25rem;
}

.lrg .zeta {
  font-size: 16px;
  font-size: 1rem;
}

SassMeister-rendered.html

<div class="xsml">
  <h1 class="alpha">This is a heading</h1>
  <h2 class="beta">This is a heading</h2>
  <h3 class="gamma">This is a heading</h3>
  <h4 class="delta">This is a heading</h4>
  <h5 class="epsilon">This is a heading</h5>
  <h6 class="zeta">This is a heading</h6>
</div>

<div class="sml">
  <h1 class="alpha">This is a heading</h1>
  <h2 class="beta">This is a heading</h2>
  <h3 class="gamma">This is a heading</h3>
  <h4 class="delta">This is a heading</h4>
  <h5 class="epsilon">This is a heading</h5>
  <h6 class="zeta">This is a heading</h6>
</div>

<div class="med">
  <h1 class="alpha">This is a heading</h1>
  <h2 class="beta">This is a heading</h2>
  <h3 class="gamma">This is a heading</h3>
  <h4 class="delta">This is a heading</h4>
  <h5 class="epsilon">This is a heading</h5>
  <h6 class="zeta">This is a heading</h6>
</div>

<div class="lrg">
  <h1 class="alpha">This is a heading</h1>
  <h2 class="beta">This is a heading</h2>
  <h3 class="gamma">This is a heading</h3>
  <h4 class="delta">This is a heading</h4>
  <h5 class="epsilon">This is a heading</h5>
  <h6 class="zeta">This is a heading</h6>
</div>