Sass 3.2 mixin for managing responsive breakpoints.

1-README.scss

.selector-one {
  @include respond-to(phone) {
    // phone and below (because it's the smallest)
  }

  @include respond-to(desktop-up) {
    // desktop and higher
  }

  @include respond-to(ultra) {
    // ultra and higher (cause it's the largest)
  }
}

.selector-two {
  @include respond-to(500px, down) {
    // custom 500px and below
  }
}

.selector-three {
  @include respond-to(500px, 800px) {
    // custom range
  }
}

_respond-to.scss

// --------------------------------------------------
// Respond to media query breakpoints
// --------------------------------------------------

$break-small: 400px;
$break-medium: 1024px;
$break-large: 1600px;

@mixin respond-to($from: 0, $to: 0) {
  // define named breakpoints
  @if      $from == 'phone' {
    $from: $break-small; $to: down;
  }
  @else if $from == 'tablet' {
    $from: $break-small; $to: $break-medium;
  }
  @else if $from == 'tablet-up' {
    $from: $break-small; $to: up;
  }
  @else if $from == 'tablet-down' {
    $from: $break-medium; $to: down;
  }
  @else if $from == 'desktop' {
    $from: $break-medium; $to: $break-large;
  }
  @else if $from == 'desktop-up' {
    $from: $break-medium; $to: up;
  }
  @else if $from == 'desktop-down' {
    $from: $break-large; $to: down;
  }
  @else if $from == 'ultra' {
    $from: $break-large; $to: up;
  }
  // build media query
  @if $to == up or $to == 0 {
    @media (min-width: $from + 1) { @content; }
  } @else if $to == down {
    @media (max-width: $from) { @content; }
  } @else {
    @media (min-width: $from + 1) and (max-width: $to) { @content; }
  }
}