Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Top Tier Title</h1>
<h2>2nd Tier Title</h2>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h2>2nd Tier Title</h2>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h2>2nd Tier Title</h2>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>

SassMeister-input.scss

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

@mixin generate-outline($reset-element: body, $list-style: decimal) {
  $counter: unique-id();
  
  counter-increment: $counter;
  
  &::before {
    content: counter($counter, $list-style)'. ';
  }
  
  @at-root {
    #{$reset-element} {
      counter-reset: $counter;
    }
  }
}

h2 {
  @include generate-outline(h1, upper-alpha);
}

h3 {
  @include generate-outline(h2);
}

SassMeister-output.css

h2 {
  counter-increment: ugcutgndq;
}
h2::before {
  content: counter(ugcutgndq,upper-alpha) ". ";
}
h1 {
  counter-reset: ugcutgndq;
}

h3 {
  counter-increment: ugcutgndu;
}
h3::before {
  content: counter(ugcutgndu,decimal) ". ";
}
h2 {
  counter-reset: ugcutgndu;
}

SassMeister-rendered.html

<h1>Top Tier Title</h1>
<h2>2nd Tier Title</h2>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h2>2nd Tier Title</h2>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h2>2nd Tier Title</h2>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>
<h3>3rd Tier Title</h3>