Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="EditorialPromo EditorialPromo--3up">

  <header class="Header">
    <h1 class="Header-headline">What We're Loving Now</h1> 
    <a class="Header-cta" href="#">See More!</a>
    <p class="Header-description">A few of the things we like</p>
  </header>
  
  <ul class="MediaList">
    
    <li class="MediaBlock">
      <a src="#" class="MediaBlock-media">
        <img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2015/11/11/1/dh2016_master-suite-bathroomfull-from-entry_h.jpg.rend.hgtvcom.231.174.jpeg" />
      </a>
    </li>
    
    <li class="MediaBlock">
      <a src="#" class="MediaBlock-media">
        <img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2010/2/24/3/original_laundry-rolling-shelves-organization_s4x3.jpg.rend.hgtvcom.231.174.jpeg" />
      </a>
    </li>
    
    <li class="MediaBlock">
      <a src="#" class="MediaBlock-media">
        <img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2014/9/20/0/Original_BPF-Holiday-House_hgtv_entertaining_hot-chocolate_spicy_h.jpg.rend.hgtvcom.231.174.jpeg" />
      </a>
      
    </li>
    
  </ul>
  
</div>

SassMeister-input.scss

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

SassMeister-output.css

/*
@include module('EditorialPromo') {
  test: $this;
  
  @include headline() {
    type: $editorialPromo-headline;
  }
  
}
*/
.EditorialPromo {
  test: this;
}

.EditorialPromo-headline {
  type: headline;
}

SassMeister-rendered.html

<div class="EditorialPromo EditorialPromo--3up">

  <header class="Header">
    <h1 class="Header-headline">What We're Loving Now</h1> 
    <a class="Header-cta" href="#">See More!</a>
    <p class="Header-description">A few of the things we like</p>
  </header>
  
  <ul class="MediaList">
    
    <li class="MediaBlock">
      <a src="#" class="MediaBlock-media">
        <img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2015/11/11/1/dh2016_master-suite-bathroomfull-from-entry_h.jpg.rend.hgtvcom.231.174.jpeg" />
      </a>
    </li>
    
    <li class="MediaBlock">
      <a src="#" class="MediaBlock-media">
        <img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2010/2/24/3/original_laundry-rolling-shelves-organization_s4x3.jpg.rend.hgtvcom.231.174.jpeg" />
      </a>
    </li>
    
    <li class="MediaBlock">
      <a src="#" class="MediaBlock-media">
        <img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2014/9/20/0/Original_BPF-Holiday-House_hgtv_entertaining_hot-chocolate_spicy_h.jpg.rend.hgtvcom.231.174.jpeg" />
      </a>
      
    </li>
    
  </ul>
  
</div>