Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="customers">
  <li>John Doe</li>
  <li>Jane Dane</li>
  <li class="special-customer">
    <img class="special-customer-photo" src="//placehold.it/150x150">
    <div class="special-customer-info">
      <p>Jack Jackson</p>
      <p>Wallaby St, 42, Sydney</p>
    </div>
  </li>
  <li class="special-customer">
    <img class="special-customer-photo" src="//placehold.it/150x150">
    <div class="special-customer-info">
      <p>Jack Jackson</p>
      <p>Wallaby St, 42, Sydney</p>
    </div>
  </li>
</ul>

SassMeister-input.scss

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



// --------------------
// Component block-list
// --------------------

%block-list {
  display: block;
}

@mixin block-list($params) {
  $defaults: (
    'selector': '.block-list',  // selector
    'item-selector': '> *',     // selector fragment
    'list-background': white,   // color
    'item-background': gray,    // color
    'vertical-gap': 10px,       // size
    'horizontal-gap': 10px      // size
  );
  $config: map-merge($defaults, $params);
  
  #{map-get($config, 'selector')} {
    @extend %block-list;
    
    background: map-get($config, 'list-background');
    padding: map-get($config, 'vertical-gap') 0 map-get($config, 'horizontal-gap');
  
    & #{map-get($config, 'item-selector')} {
      background: map-get($config, 'item-background');
      margin-bottom: map-get($config, 'vertical-gap');
    }
  }
}

// ----------------------
// Component media-object
// ----------------------

@mixin media-object($params) {
  $defaults: (
    'selector': '.media-object',              // selector
    'media-selector': '.media-object-media',  // selector fragment
    'body-selector': '.media-object-body',    // selector fragment
    'media-position': 'left',                 // enum(left, right)
    'gap': 10px                               // size
  );
  $config: map-merge($defaults, $params);
  
  $media-position: map-get($config, 'media-position');
  $media-order: 1;
  $body-order: 2;
  @if ($media-position == 'right') {
    $body-order: 1;
    $media-order: 2;
  }
  
  #{map-get($config, 'selector')} {
    display: flex;
    flex-flow: row;

    & #{map-get($config, 'media-selector')} {
      order: $media-order;
    }
    
    & #{map-get($config, 'body-selector')} {
      order: $body-order;
      flex-grow: 1;
      margin-#{$media-position}: map-get($config, 'gap');
    }
  }
}

// -----------------------
// Project-specific styles
// -----------------------

@include block-list((
  'selector': 'contacts'
));

@include block-list((
  'selector': '.messages',
  'horizontal-gap': 0,
  'vertical-gap': 0,
  'list-background': gray,
  'item-background': white,
  'item-selector': '.message'
));

@include block-list((
  'selector': '.customers',
  'item-selector': 'li'
));

@include media-object((
  'selector': '.special-customer:nth-child(odd)',
  'media-selector': '.special-customer-photo',
  'body-selector': '.special-customer-info',
  'media-position': 'left',
  'gap': 1rem
));
@include media-object((
  'selector': '.special-customer:nth-child(even)',
  'media-selector': '.special-customer-photo',
  'body-selector': '.special-customer-info',
  'media-position': 'right',
  'gap': 1rem
));

SassMeister-output.css

contacts, .messages, .customers {
  display: block;
}

contacts {
  background: white;
  padding: 10px 0 10px;
}
contacts > * {
  background: gray;
  margin-bottom: 10px;
}

.messages {
  background: gray;
  padding: 0 0 0;
}
.messages .message {
  background: white;
  margin-bottom: 0;
}

.customers {
  background: white;
  padding: 10px 0 10px;
}
.customers li {
  background: gray;
  margin-bottom: 10px;
}

.special-customer:nth-child(odd) {
  display: flex;
  flex-flow: row;
}
.special-customer:nth-child(odd) .special-customer-photo {
  order: 1;
}
.special-customer:nth-child(odd) .special-customer-info {
  order: 2;
  flex-grow: 1;
  margin-left: 1rem;
}

.special-customer:nth-child(even) {
  display: flex;
  flex-flow: row;
}
.special-customer:nth-child(even) .special-customer-photo {
  order: 2;
}
.special-customer:nth-child(even) .special-customer-info {
  order: 1;
  flex-grow: 1;
  margin-right: 1rem;
}

SassMeister-rendered.html

<ul class="customers">
  <li>John Doe</li>
  <li>Jane Dane</li>
  <li class="special-customer">
    <img class="special-customer-photo" src="//placehold.it/150x150">
    <div class="special-customer-info">
      <p>Jack Jackson</p>
      <p>Wallaby St, 42, Sydney</p>
    </div>
  </li>
  <li class="special-customer">
    <img class="special-customer-photo" src="//placehold.it/150x150">
    <div class="special-customer-info">
      <p>Jack Jackson</p>
      <p>Wallaby St, 42, Sydney</p>
    </div>
  </li>
</ul>