Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="extends">
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

$site-extends:(
    "Headlines":
      main-headline
      secondary-headline
      ,
    "Copy":(
      feature-copy: "lorem",
      detail-copy: "lorem",
    )
  );
%main-headline {
  font-size: 3em;
  color: pumpkin;
}
%secondary-headline {
  font-size: 2em;
  color: tomato;
}
%feature-copy {
  font-size: 1.2em;
  line-height: 1.1;
}
%detail-copy {
  font-size: 1em;
  line-height: 1.4;
}
  
$i: 0 !global;
$lorem: "Mlkshk banjo organic lomo fanny pack sartorial, literally Echo Park gentrify Helvetica High Life ethical disrupt. Literally selvage stumptown typewriter PBR. Banksy selvage Thundercats Marfa sriracha.";
%styleguide-label {
  padding: 10px;
  display: block;
  background: black;
  color: white;
}
    
.extends {
  div {
    margin-bottom: 1em;
  }
  @each $extend-group, $extends in $site-extends {
    $i: $i +1 !global;
    div:nth-child(#{$i}) {
      @extend  %styleguide-label;
      &:after {
        content: "#{$extend-group}";
      }
    }
    @if (type_of($extends) != map) {
      @each $extend in $extends {
        $i: $i +1 !global;
        div:nth-child(#{$i}) span{
          @extend %#{$extend};
          &:before {
            content: "#{$extend}";
          }
        }
      }
    }
    @else {
      @each $key, $value in $extends {
        $i: $i +1 !global;
        div:nth-child(#{$i}) {
          @extend %#{$key};
          & span:before {
            content: "#{$key}: ";
          }
          & span:after {
            @if $value == "lorem" {
              content: "#{$lorem}";
            }
            @else {
              content: "#{$value}";
            }
          }
        }
      }
    }
  }
}

SassMeister-output.css

.extends div:nth-child(2) span {
  font-size: 3em;
  color: pumpkin;
}

.extends div:nth-child(3) span {
  font-size: 2em;
  color: tomato;
}

.extends div:nth-child(5) {
  font-size: 1.2em;
  line-height: 1.1;
}

.extends div:nth-child(6) {
  font-size: 1em;
  line-height: 1.4;
}

.extends div:nth-child(1), .extends div:nth-child(4) {
  padding: 10px;
  display: block;
  background: black;
  color: white;
}

.extends div {
  margin-bottom: 1em;
}
.extends div:nth-child(1):after {
  content: "Headlines";
}
.extends div:nth-child(2) span:before {
  content: "main-headline";
}
.extends div:nth-child(3) span:before {
  content: "secondary-headline";
}
.extends div:nth-child(4):after {
  content: "Copy";
}
.extends div:nth-child(5) span:before {
  content: "feature-copy: ";
}
.extends div:nth-child(5) span:after {
  content: "Mlkshk banjo organic lomo fanny pack sartorial, literally Echo Park gentrify Helvetica High Life ethical disrupt. Literally selvage stumptown typewriter PBR. Banksy selvage Thundercats Marfa sriracha.";
}
.extends div:nth-child(6) span:before {
  content: "detail-copy: ";
}
.extends div:nth-child(6) span:after {
  content: "Mlkshk banjo organic lomo fanny pack sartorial, literally Echo Park gentrify Helvetica High Life ethical disrupt. Literally selvage stumptown typewriter PBR. Banksy selvage Thundercats Marfa sriracha.";
}

SassMeister-rendered.html

<div class="extends">
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
</div>