Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="styleguide">
  <div class="colors">
    <div>Colors</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <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>
</div>

SassMeister-input.scss

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

$site-colors:(
  primary: #4EEBBF,
  secondary: #5F60F0,
  tertiary: #FC6428,
);
  
$site-extends:(
  "Headlines":
    main-headline
    secondary-headline
    ,
  "Copy":(
    feature-copy: "lorem",
    detail-copy: "this is my copy text",
  )
);

%main-headline {
  font-size: 3em;
  color: map-get($site-colors, primary);
}
%secondary-headline {
  font-size: 2em;
  color: map-get($site-colors, secondary);
}
%feature-copy {
  font-size: 1.2em;
  line-height: 1.1;
}
%detail-copy {
  font-size: 1em;
  line-height: 1.4;
}
  
////
// Styleguide
////

%styleguide-label {
  padding: 10px;
  display: block;
  background: black;
  color: white;
}

.styleguide > div {
  width: 49%;
  margin-right: 1%;
  float: left;
  div {
    margin-bottom: 1em;
  }
}
.colors {
  div:nth-child(1) {
    @extend %styleguide-label;
  }
  $i: 1;
  @each $color, $value in $site-colors {
    $i: $i + 1 ;
    div:nth-child(#{$i}) {
      background: #{$value};
      padding: .5em;
      font-size: 2em;
      text-shadow: 1px 1px 1px white;
      &:after {
        content: "#{$color}";
      }
    }
  }
}
    
.extends {
  $i: 0 ;
  $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.";
  // First level of the map
  @each $extend-group, $extends in $site-extends {
    $i: $i +1 ;
    div:nth-child(#{$i}) {
      @extend  %styleguide-label;
      &:after {
        content: "#{$extend-group}";
      }
    }
    // 2nd level of the map
    @if (type_of($extends) != map) {
      @each $extend in $extends {
        $i: $i +1 ;
        div:nth-child(#{$i}) span{
          @extend %#{$extend};
          &:before {
            content: "#{$extend}";
          }
        }
      }
    }
    @else {
      @each $key, $value in $extends {
        $i: $i +1 ;
        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: #4eebbf;
}

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

.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;
}

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

.styleguide > div {
  width: 49%;
  margin-right: 1%;
  float: left;
}
.styleguide > div div {
  margin-bottom: 1em;
}

.colors div:nth-child(2) {
  background: #4eebbf;
  padding: .5em;
  font-size: 2em;
  text-shadow: 1px 1px 1px white;
}
.colors div:nth-child(2):after {
  content: "primary";
}
.colors div:nth-child(3) {
  background: #5f60f0;
  padding: .5em;
  font-size: 2em;
  text-shadow: 1px 1px 1px white;
}
.colors div:nth-child(3):after {
  content: "secondary";
}
.colors div:nth-child(4) {
  background: #fc6428;
  padding: .5em;
  font-size: 2em;
  text-shadow: 1px 1px 1px white;
}
.colors div:nth-child(4):after {
  content: "tertiary";
}

.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: "this is my copy text";
}

SassMeister-rendered.html

<div class="styleguide">
  <div class="colors">
    <div>Colors</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <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>
</div>