Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

// Base prototype object
// This is a very abstract pattern than is meant to 
// be extended by multiple "semantic" objects (modules)

%media
  overflow: hidden
  zoom: 1

  > a
    @extend %media-object !optional
    display: inline-block

%media-left
  @extend %media

  %media-body
    overflow: hidden

%media-top
  @extend %media

  %media-object
    width: 100%
    zoom: 1
    overflow: hidden


// Abstract module 
// This is an approach that has manifested itself 
// with this particular project. 
// Needed a way to have a semantic module that 
// could be presented in a number of forms.
// It encapsulates attributes that all instances
// have, or could have, in common.

// Note the definition of %media-object.

%dish-media-object
  %media-object
    position: relative

  .details
    @extend %media-body

  .another-common-attr
    foo: bar


// Semantic module
// This is where the abstract module becomes semantic. 
// Duh.
// Just one of several presentations of the same type
// of object.
// Extends %media-top, which defines styling for 
// %media-object, which is extended by figure here.


.DishHero
  @extend %dish-media-object
  @extend %media-top
  position: relative
  
  figure
    @extend %media-object


// Another semantic module
// A different presentation that does not 
.DishList
  li
    @extend %dish-media-object
    @extend %media-left

  .another-common-attr
    display: none

SassMeister-output.css

.DishList li, .DishHero {
  overflow: hidden;
  zoom: 1;
}
.DishList li > a, .DishHero > a {
  display: inline-block;
}

.DishList li .details {
  overflow: hidden;
}

.DishHero .DishList li > a, .DishList .DishHero li > a, .DishHero > a, .DishHero figure {
  width: 100%;
  zoom: 1;
  overflow: hidden;
}

.DishList li > a, .DishHero > a, .DishHero figure {
  position: relative;
}
.DishHero .another-common-attr, .DishList li .another-common-attr {
  foo: bar;
}

.DishHero {
  position: relative;
}

.DishList .another-common-attr {
  display: none;
}