Using Compass Placeholder Selectors in Media Queries

home.css

.press-release, .newsletter-signup {
  /* business in the front */
  position: absolute;
  z-index: 1000;
}

.event, .yet-another-pr-thang {
  /* party in the back */
  position: absolute;
  z-index: -1000;
}

home.scss

// styles exclusive to the homepage - no media queries here, dawg.

.press-release {
  @extend %base-business;
}

.event {
  @extend %base-party;
}

.newsletter-signup {
  @extend %base-business;
}

.yet-another-pr-thang {
  @extend %base-party;
}

large.css

@media only screen and (min-width: 60em) {
  #thing, h1 {
    /* party in the back */
    position: absolute;
    z-index: -1000;
  }

  #nav-thing, h6 {
    /* business in the front */
    position: absolute;
    z-index: 1000;
  }

  #nav-thing {
    background-color: orange;
    color: yellow;
  }

  h1 {
    font-size: 400em;
  }

  h6 {
    font-size: 4em;
  }
}

large.scss

// styles for your "large" (min-width: 60em) stuffs, dawg.

// 1. Consider whether the inheritance is specific to this @media query, if it can be moved outside the query without changing the meaning, do so.
// 2. Sometimes, the inheritance can actually be modeled in the other direction. Consider whether there is a single class that should be extending a per-media placeholder instead.
// 3. Lastly, if you really need to use extend, you may need to introduce some duplication in your stylesheets -- consider making a different base class per media query and using a shared mixin to keep it DRY.

// introducing some duplication by making a different base class & using a shared mixin in my mq's.

%large-partay {
  @include party;
}

%large-bidnass {
  @include business;
}

#thing {
  @extend %large-partay;
}

#nav-thing {
  @extend %large-bidnass;
  background-color: orange;
  color: yellow;
}

h1 {
  @extend %large-partay;
  font-size: 400em;
}

h6 {
  @extend %large-bidnass;
  font-size: 4em;
}

medium.css

@media only screen and (min-width: 40em) {
  #logo, h1 {
    /* party in the back */
    position: absolute;
    z-index: -1000;
  }

  #primary-navigation, h6 {
    /* business in the front */
    position: absolute;
    z-index: 1000;
  }

  #logo {
    background-color: green;
    color: red;
  }

  #primary-navigation {
    background-color: orange;
    color: yellow;
  }

  h1 {
    font-size: 200em;
  }

  h6 {
    font-size: 1em;
  }
}

medium.scss

// styles for your "medium" (min-width: 40em) stuffs, dawg.

// 1. Consider whether the inheritance is specific to this @media query, if it can be moved outside the query without changing the meaning, do so.
// 2. Sometimes, the inheritance can actually be modeled in the other direction. Consider whether there is a single class that should be extending a per-media placeholder instead.
// 3. Lastly, if you really need to use extend, you may need to introduce some duplication in your stylesheets -- consider making a different base class per media query and using a shared mixin to keep it DRY.

// introducing some duplication by making a different base class & using a shared mixin in my mq's.

%medium-partay {
  @include party;
}

%medium-bidnass {
  @include business;
}

#logo {
  @extend %medium-partay;
  background-color: green;
  color: red;
}

#primary-navigation {
  @extend %medium-bidnass;
  background-color: orange;
  color: yellow;
}

h1 {
  @extend %medium-partay;
  font-size: 200em;
}

h6 {
  @extend %medium-bidnass;
  font-size: 1em;
}

mixins.scss

// Thank you, James Acklin (@acklindesign) | http://twitter.com/acklindesign/status/276789693885071361

$default-position: absolute !default;
@mixin business($position: $default-position) {
  /* business in the front */
  position: $position;
  z-index: 1000;
}

@mixin party($position: $default-position) {
  /* party in the back */
  position: $position;
  z-index: -1000;
}

%base-business {
  @include business;
}

%base-party {
  @include party;
}

A refactoring of https://gist.github.com/3707635 - not sure why I didn't approach it this way before. Credit belongs to Chris Eppstein: http://chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released/