Nifty mixins for responsive Sass. Requires Sass >= 3.2

media.scss

/*
 * Usage:
 * h1 {
 *   font-size: 2em;
 *   @include media(small) {
 *     font-size: 1.5em;
 *   }
 * }
*/
@mixin media($media) {
  @if $media == full {
    @media only screen and (min-width: 960px) { @content; }
  }
  @else if $media == medium {
    @media only screen and (max-width: 960px) { @content; }
  }
  @else if $media == small {
    @media only screen and (max-width: 500px) { @content; }
  }
  @else if $media == hi_res {
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { @content; }
  }
}

/*
 * Usage:
 * h1.logo {
 *   background: transparent no-repeat left top;
 *   @include hi_res('logo.png', 'logo_2x.png', 100px, 40px);
 * }
*/
@mixin hi_res($standard, $hi, $width, $height) {
  background-image: image-url($standard);
  @include media(hi_res) {
    background-image: image-url($hi);
    background-size: $width $height;
    -webkit-background-size: $width $height;
  }
}