zachharkey
3/22/2013 - 7:33 PM

A SASS(SCSS) Mixin to easily apply the [OOCSS Media object][stubbornella] to any component. Implements the code from this [Gist][github]

A SASS(SCSS) Mixin to easily apply the OOCSS Media object to any component.

Implements the code from this Gist which I forked from Victa to provide more SMACSS friendly default class names and reordered the arguments in based on my own frequency of use.

See it in action

<div class="teaser">
  <img class="teaser-img" src="http://placehold.it/100x100">
  <div class="teaser-bd">
    <h3>Example Teaser Item</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

<div class="teaser">
  <img class="teaser-img" src="http://placehold.it/100x100">
  <div class="teaser-bd">
    <h3>Example Teaser Item</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

<div class="teaser">
  <img class="teaser-img" src="http://placehold.it/100x100">
  <div class="teaser-bd">
    <h3>Example Teaser Item</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>


.teaser {
  @include media-object('.teaser-img', '.teaser-bd');
}

// OOCSS Media Object
@mixin media-object($img: '.media-img', $bd: '.media-bd', $margin:10px, $position: left, $formatting-context: 'overflow') {
  @include pie-clearfix; // or extend a .clearfix class
  #{unquote($bd)} {
    @if $formatting-context == 'overflow' {
      overflow:hidden;
    } @else {
      display:table-cell;
      width:10000px;
      *width:auto;
      *zoom:1;
    }
  }
  #{unquote($img)} {
    float:$position;
    img{display:block;}
    @if $margin > 0 {
      margin-#{opposite-position($position)}:$margin;
    }
  }
}