Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="EditorialPromo media">
  <header class="EditorialPromo media-headline">
    Editorial Promo
  </header>
</div>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@mixin namespace($namespace: "") {
  @at-root .#{$namespace} {
    @content;
  }
}

@mixin block($block) {
  $namespace: #{&} + ".";
  $prefix: if(#{&}, $namespace, "");
  
  @at-root #{$prefix}#{$block} {
    @content;
  }
}

@mixin element($element) {
  @at-root #{&}-#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  @at-root #{&}--#{$modifier} {
    @content;
  }
}

@include namespace(EditorialPromo) {
  
  @include block(media) {
    
    @include element(headline) {
      font-weight: bold;
      font-size: 36px;
    }
    
  }
  
}

SassMeister-output.css

.EditorialPromo.media-headline {
  font-weight: bold;
  font-size: 36px;
}

SassMeister-rendered.html

<div class="EditorialPromo media">
  <header class="EditorialPromo media-headline">
    Editorial Promo
  </header>
</div>