gistfile1.scss

// ***************************************************************************
// in _vars.scss
// ***************************************************************************
// Breakpoints
$hand-start: 481px;
$lap-start:  768px;
$desk-start: 1024px;
$wall-start: 1200px;






// in _mixins.scss

// ***************************************************************************
// Media Queries
//
// Assumes all styles for mobile are outside of media queries
// Each query will apply all styles to that width and UP
// The only exception is media-query(palm), which targets everything UNDER
// "hand" size for the rare case we need a mobile-specific style.
//
// palm-and-down
// hand-and-up
// lap-and-up
// desk-and-up
// wall-and-up
// @else accepts a pixel value (and up)
//
// ***************************************************************************
@mixin media-query($media-query){

  // All "palm" styles should be done outside of a media query.

  @if $media-query == "hand-and-up" {
    @media only screen and (min-width: $hand-start) { @content; }
  }
  @else if $media-query == "lap-and-up" {
    @media only screen and (min-width: $lap-start) { @content; }
  }
  @else if $media-query == "desk-and-up" {
    @media only screen and (min-width: $desk-start) { @content; }
  }
  // maybe we can make some adjustments for huge screens?
  @else if $media-query == "wall-and-up" {
    @media only screen and (min-width: $wall-start) { @content; }
  }

  // These are not for standard "palm" styles. This is only for the rare case
  // that we need a special rule targeting small devices only.
  @else if $media-query == "palm-and-down" {
    @media only screen and (max-width: ($hand-start - 1px)) { @content; }
  }

  // If $media-query arg is not named, it expects a px value to set a min-width
  // this should be used for all feature-based breakpoints
  @else {
    @media only screen and (min-width: ($media-query)) { @content; }
  }

}

Using this approach:

.featured-img {
  margin: 0 (-1.2 * $half-spacing-unit);
  @include media-query(539px){
    margin: 0 auto;
  }
  .lt-ie9 & { margin: 0 auto; }
}

This way you're not unsure whether or not .featured-img has styles in an IE stylesheet or any of the media queries.. It's all right here. Maintainability win, but sort of a DRY loss. But the gain is much better than the loss here.