sass-site/source/assets/stylesheets/helpers/_placeholder-selectors.scss

// ===========================================================================
// PLACEHOLDER SELECTORS
// For @extend'ing.



%source-sans-pro-regular { @include font-face($source-sans-pro-regular);     }
%source-sans-pro-bold    { @include font-face($source-sans-pro-bold, 600);   }

%chaparral-pro-regular   { @include font-face($chaparral-pro-regular, 400);  }
%chaparral-pro-semibold  { @include font-face($chaparral-pro-semibold, 600); }

%source-code-pro-regular { @include font-face($source-code-pro-regular);     }



%caps {
  @extend %source-sans-pro-bold;
  @include font-size($font-size-small);
  letter-spacing: .0625em;
  text-transform: uppercase;
}



// ---------------------------------------------------------------------------
// CLEARFIX

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

@mixin clearfix {
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }

  &:after { clear: both; }

  /*
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  *zoom: 1;
}

%clearfix { @include clearfix; }



// ---------------------------------------------------------------------------
// FLOATS

@mixin float-with-margin($direction: left) {
  @if $direction == "right" {
    @include float-right;
    margin-left: $gutter-width;
  }

  @else {
    @include float-left;
    margin-right: $gutter-width;
  }
}

@mixin float-last-child($direction: left) {
  @if $direction == "right" { margin-left: 0; }

  @else { margin-right: 0; }
}

%float-left  { @include float-with-margin;  }
%float-right { @include float-with-margin(right); }

%float-left-last-child  { @include float-last-child;  }
%float-right-last-child { @include float-last-child(right); }



// ---------------------------------------------------------------------------
// iPhone

@mixin placeholder-selectors-iPhone {
  %clearfix-iPhone { @include clearfix; }

  %float-left-iPhone  { @include float-with-margin;  }
  %float-right-iPhone { @include float-with-margin(right); }

  %float-left-last-child-iPhone  { @include float-last-child;  }
  %float-right-last-child-iPhone { @include float-last-child(right); }
}



// ---------------------------------------------------------------------------
// SMALL TABLET

@mixin placeholder-selectors-small-tablet {
  %clearfix-small-tablet { @include clearfix; }

  %float-left-small-tablet  { @include float-with-margin;  }
  %float-right-small-tablet { @include float-with-margin(right); }

  %float-left-last-child-small-tablet  { @include float-last-child;  }
  %float-right-last-child-small-tablet { @include float-last-child(right); }
}