Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="content-block--heading alpha">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading beta">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading gamma">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading delta">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading epsilon">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading zeta">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----


$base-font-size: 16px;
$increment: 8px;

h1,h2,h3,h4,h5,h6 {
  margin: 0;
  font-size: $base-font-size;
}
.content-block--heading {
  
  .heading {
    font-size: 100%;
    line-height: 1.5em;
  }
  .sub-heading {
    font-size: 60%;
    line-height: 1.5em;
  }
}

  
.alpha {
  font-size: $base-font-size + ($increment * 6);
}
.beta {
  font-size: $base-font-size + ($increment * 5);
}
.gamma {
  font-size: $base-font-size + ($increment * 4);
}
.delta {
  font-size: $base-font-size + ($increment * 3);
}
.epsilon  {
  font-size: $base-font-size + ($increment * 2);
}
.zeta {
  font-size: $base-font-size + ($increment * 1);
}

SassMeister-output.css

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: 16px;
}

.content-block--heading .heading {
  font-size: 100%;
  line-height: 1.5em;
}
.content-block--heading .sub-heading {
  font-size: 60%;
  line-height: 1.5em;
}

.alpha {
  font-size: 64px;
}

.beta {
  font-size: 56px;
}

.gamma {
  font-size: 48px;
}

.delta {
  font-size: 40px;
}

.epsilon {
  font-size: 32px;
}

.zeta {
  font-size: 24px;
}

SassMeister-rendered.html

<div class="content-block--heading alpha">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading beta">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading gamma">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading delta">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading epsilon">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>

<div class="content-block--heading zeta">
  <h2 class="heading">Heading</h2>
  <h3 class="sub-heading">This sub heading is very nice </h3>
</div>