Generated by SassMeister.com, the Sass playground.

SassMeister-input.scss

// HTML5 section-heading outline style generation
// not actually the right way of dealing with doc outline but just a test

$heading-font-sizes: 12px 14px 16px 20px 24px 30px;

$s: h1;
@for $n from 0 through 5 {
  #{$s} { font-size: nth($heading-font-sizes, length($heading-font-sizes) - $n); }
  $s: append((section), $s);
}

SassMeister-output.css

h1 {
  font-size: 30px;
}

section h1 {
  font-size: 24px;
}

section section h1 {
  font-size: 20px;
}

section section section h1 {
  font-size: 16px;
}

section section section section h1 {
  font-size: 14px;
}

section section section section section h1 {
  font-size: 12px;
}