Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="Site__">
  <div class="_Products__">
    <div class="ProductShowcase">
      <img class="_Image" src="http://placepuppy.it/300/200">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="ProductShowcase">
      <img class="_Image" src="http://placepuppy.it/300/200">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="ProductShowcase">
      <img class="_Image" src="http://placepuppy.it/300/200">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
  </div>
  <div class="_Team__">
    <div class="TeamMemberProfile -featured">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

// The helper mixins:
@mixin extend-variants($component_name, $variants...) {
    @each $variant in $variants {
        @if type_of($variant) == "list" {
            $variant: #{nth($variant, 1)}--#{nth($variant, 2)};
        }
        @extend %#{$component_name}%-#{$variant};
    }
}
@mixin extend($component_name, $variants...) {
    @extend %#{$component_name};
    @include extend-variants($component_name, $variants...);
}
@mixin state($state, $val: true) {
    &[data-#{$state}="#{$val}"] {
        @content;
    }
}

// A sample abstract Component definition using placeholder selectors.
// Only the rules that are extended will be present in the CSS output.
// Note the use of the regular class `._Image` for a subcomponent.
// This is done to avoid nested placholder selectors, which, when
// extended, can generate a mass of redundant selectors.
$Highlight-spacing: 14px;
%Highlight {
    clear: both;
    color: black;
    font-size: 16px;
    padding: $Highlight-spacing;
    &::after {
      clear: both;
      content: '';
      display: block;
    }
    &%-image--right {
        ._Image {
            float: right;
            margin-left: $Highlight-spacing;
        }
    }
    &%-image--left {
        ._Image {
            float: left;
            margin-right: $Highlight-spacing;
        }
    }
    &%-large {
        font-size: 24px;
        ._Image {
          width: 50%;
        }
    }
    &%-dark {
        background: black;
        color: white;
    }
    ._Image {
      margin-bottom: $Highlight-spacing;
      width: 25%;
    }
}

// The mixins simplify extending the different combinations and
// take advantage of how `@extend` rewrites placeholder selectors
// to hide presentation-oriented classes behind semantic names.
// (By design, the mixins only extend placeholder selectors.)
.ProductShowcase {
    @include extend(Highlight, dark, image right);
}
.TeamMemberProfile {
    @include extend(Highlight, image left);
    &.-featured {
      @include extend-variants(Highlight, large);
    }
}

// Basic Layout with two Regions.
.Site__ {
  ._Products__,
  ._Team__ {
    margin: 0 auto;
  }
  ._Products__ {
    max-width: 600px;
  }
  ._Team__ {
    max-width: 800px;
  }
}

SassMeister-output.css

.ProductShowcase, .TeamMemberProfile {
  clear: both;
  color: black;
  font-size: 16px;
  padding: 14px;
}
.ProductShowcase::after, .TeamMemberProfile::after {
  clear: both;
  content: '';
  display: block;
}
.ProductShowcase ._Image {
  float: right;
  margin-left: 14px;
}
.TeamMemberProfile ._Image {
  float: left;
  margin-right: 14px;
}
.TeamMemberProfile.-featured {
  font-size: 24px;
}
.TeamMemberProfile.-featured ._Image {
  width: 50%;
}
.ProductShowcase {
  background: black;
  color: white;
}
.ProductShowcase ._Image, .TeamMemberProfile ._Image {
  margin-bottom: 14px;
  width: 25%;
}

.Site__ ._Products__,
.Site__ ._Team__ {
  margin: 0 auto;
}
.Site__ ._Products__ {
  max-width: 600px;
}
.Site__ ._Team__ {
  max-width: 800px;
}

SassMeister-rendered.html

<div class="Site__">
  <div class="_Products__">
    <div class="ProductShowcase">
      <img class="_Image" src="http://placepuppy.it/300/200">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="ProductShowcase">
      <img class="_Image" src="http://placepuppy.it/300/200">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="ProductShowcase">
      <img class="_Image" src="http://placepuppy.it/300/200">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
  </div>
  <div class="_Team__">
    <div class="TeamMemberProfile -featured">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <div class="TeamMemberProfile">
      <img class="_Image" src="http://placepuppy.it/400/400">
      <p class="_Description">Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
  </div>
</div>