A SASS mixin to help generate responsive media query styles. Responsive breakpoints are based on Twitter Bootstrap 2 breakpoints.

responsify.scss

/**
 * Creates responsive media query styles for a particular media size
 * Media type codes are: phone, subtablet, tablet, desktop, large-desktop
 *
 * Example usage:
 *
 *   .header {
 *     @include responsify(phone) {
 *       width: 200px;
 *     }
 *   }
 *
 * The above style would apply "width: 200px" to the element with class of 'header'
 * if the user's screen resolution is 480px wide or less.
 *
 * Credits to http://thesassway.com/intermediate/responsive-web-design-part-2
 * for inspiring this method of creating a responsive mixin for SASS and
 * and Twitter Bootstrap for providing the RWD breakpoints.
 *
 */
@mixin responsify($media) {
  // Landscape phones and down
  // media-type code: phone
  @if $media == phone {
    @media (max-width: 480px) {
      @content;
    }
  }

  // Landscape phone to portrait tablet
  // media-type code: subtablet
  @else if $media == subtablet {
    @media (min-width: 481px) and (max-width: 767px) {
      @content;
    }
  }

  // Portrait tablet to landscape and desktop
  // repsonsive code: tablet
  @else if $media == tablet {
    @media (min-width: 768px) and (max-width: 979px) {
      @content;
    }
  }

  // Default: Desktop
  // media-type code: desktop
  @else if $media == desktop {
    @media (min-width: 980px) and (max-width: 1209px) {
      @content;
    }
  }

  // Large desktop
  // media-type code: large-desktop
  @else if $media == large-desktop {
    @media (min-width: 1210px) {
      @content;
    }
  }
}