SASS 3.2 Mixin for easy responsive declarations (break-points) Uses the best of SASS variables and @each to simply define break-points in a more natural language.

responsive-mixin.sass

/* responsive break points - customise to suit or add more */
$break-small: 480px;
$break-medium: 768px;
$break-large: 940px;
$break-x-large: 1140px;


/* how to use:
   @include devices(mobile) {                      - targets a single device
     body {
       width: 80%;
     }

     p {
       font-size: 12px;
     }
  }

   @include devices(desktop desktop-large) {...}   - targets multiple devices with same CSS block
   @include devices(all) {...}                     - targets all devices (not required by here for consistency)
*/

@mixin devices($medias) {

  @each $media in $medias {

    @if $media == mobile {
      @media only screen and (max-width: $break-small) { @content; }
    }
    @else if $media == tablet {
      @media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; }
    }
    @else if $media == desktop {
      @media only screen and (min-width: $break-medium + 1) and (max-width: $break-large) { @content; }
    }
    @else if $media == desktop-large {
      @media only screen and (min-width: $break-large + 1) { @content; }
    }
    // redundant, but included for consistency
    @else if $media == all {
      @media only screen { @content; }
    }
  }
}


/* example SASS */
@include devices(mobile) {
  body {
    width: 80%;
  }

  p {
    font-size: 12px;
  }
}

@include devices(tablet) {
  body {
    width: 90%;
  }
  p {
    font-size: 13px;
  }
}

@include devices(mobile tablet) {
  body {
    padding: 2px;
  }

  p {
    font-weight: 150;
  }
}

@include devices(desktop desktop-large) {
  body {
    padding: 5px;
  }

  p {
    font-size: 15px;
  }
}

/* this generates the following in CSS */

@media only screen and (max-width: 480px) {
  body {
    width: 80%;
  }
  p {
    font-size: 12px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  body {
    width: 90%;
  }
  p {
    font-size: 13px;
  }
}
@media only screen and (max-width: 480px) {
  body {
    padding: 2px;
  }
  p {
    font-weight: 150;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  body {
    padding: 2px;
  }
  p {
    font-weight: 150;
  }
}
@media only screen and (min-width: 769px) and (max-width: 940px) {
  body {
    padding: 5px;
  }
  p {
    font-size: 15px;
  }
}
@media only screen and (min-width: 941px) and (max-width: 1140px) {
  body {
    padding: 5px;
  }
  p {
    font-size: 15px;
  }
}