Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="capsule">

  <header class="capsule__header">
    <h1 class="capsule__headline">What We're Loving Now</h1> 
    <a class="capsule__cta" href="#">See More!</a>
    <p class="capsule__description">A few of the things we like</p>
  </header>
  
  <section class="capsule__content">
  
    <div class="block">
      <a src="#" class="block__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>
    </div>
    
    <div class="block">
      <a src="#" class="block__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>
    </div>
    
    <div class="block">
      <a src="#" class="block__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>
    </div>
    
  </section>
  
</div>

SassMeister-input.scss

// ----
// Sass (v4.0.0.alpha.1)
// ----

@function map-merge-deep($map-old, $map-new, $overwrite: true) {

	// Iterate through each value of the new map
	@each $key, $new-value in $map-new {
		// Check if that value already exists on the old map
		@if map-has-key($map-old, $key) {
			// There is an existing key
			$old-value: map-get($map-old, $key);
			@if type-of($new-value) == map and type-of($old-value) == map {
				// If both are maps, recurse regardless of $overwrite
				$merged-value: map-merge-deep($old-value, $new-value);
				$map-old: map-set($map-old, $key, $merged-value);	
			} @else {
				// Otherwise check $overwrite
				@if $overwrite{
					$map-old: map-set($map-old, $key, $new-value);
				}
			}
		} @else {
			// There is no existing key to add
			$map-old: map-set($map-old, $key, $new-value);
		}
	}
	@return $map-old;
	
}

@function config($old-config, $new-config) {
  @return map-merge($old-config, $new-config);
}

@function option($map, $keys...) {
    @each $key in $keys {
        $map: map-get($map, $key);
    }
    @return $map;
}

@function getParentSelector() {
  $parentSelector: '#{&}';
  $sep: str-index($parentSelector, '__');
  
  @if ($sep) {
    @return str-slice($parentSelector, 0, $sep - 1);
  }
  @else {
    @return $parentSelector;
  }
}


// Pattern mixins
$debug: true;

@mixin atom($name, $preset: null) {
  $parent: getParentSelector();
  
  @at-root #{$parent}__#{$name} {
    @if ($debug) {
      type: atom;
    }
    @content;
  };
}

@mixin molecule($name) {
  @at-root &__#{$name} {
    @if ($debug) {
      type: molecule;
    }
    @content;
  }
}

@mixin organism($name) {
  .#{$name} {
    @if ($debug) {
      type: organism;
    }
    @content;
  }
}

@mixin headline($custom: ()) {
  
  $headline: config((
    'extends': none,
    'font-size': null,
    'font-weight': null
  ), $custom);
  
  @include atom('headline', option($headline, 'preset')) {
    @extend %#{option($headline, 'extends')} !optional;
    font-size: option($headline, 'font-size');
    font-weight: option($headline, 'font-weight');
  }
  
}

@mixin description($custom: ()) {
  
  $description: config((
    'extends': none
  ), $custom);
  
  @include atom('description') {
    @extend %#{option($description, 'extends')} !optional;
  }
  
}

@mixin cta($custom: ()) {
  
  $cta: config((
    'extends': none
  ), $custom);
  
  @include atom('cta') {
    @extend %#{option($cta, 'extends')} !optional;
  }
  
}

@mixin header($custom: ()) {
  
  $type: 'header';
  
  $header: config((
    'headline': null,
    'margin': null
  ), $custom);
  
  @include molecule('header') {
    margin: option($header, 'margin');
    
    @include headline();
    @include description();
    @include cta();
    
  }
  
}

@mixin capsule($custom: ()) {
  
  $capsule: config((
    
  ), $custom);
  
  @include organism('capsule') {
    @include header((
      'headline': 'headline1'
    ));
  }
  
}
@include capsule();

SassMeister-output.css

.capsule {
  type: organism;
}
.capsule__header {
  type: molecule;
}
.capsule__headline {
  type: atom;
}
.capsule__description {
  type: atom;
}
.capsule__cta {
  type: atom;
}

SassMeister-rendered.html

<div class="capsule">

  <header class="capsule__header">
    <h1 class="capsule__headline">What We're Loving Now</h1> 
    <a class="capsule__cta" href="#">See More!</a>
    <p class="capsule__description">A few of the things we like</p>
  </header>
  
  <section class="capsule__content">
  
    <div class="block">
      <a src="#" class="block__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>
    </div>
    
    <div class="block">
      <a src="#" class="block__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>
    </div>
    
    <div class="block">
      <a src="#" class="block__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>
    </div>
    
  </section>
  
</div>