Sass - Media queries made simple

mediaqueries.scss

//
// sass - Media queries made simple
//
// @require sass-3.2 (you need eventually to do "sudo gem install sass --pre")
//
// Inspired by Maxime Thirouin & Mason Wendell

/* How to use it?
.class-name {
  @include mq(phone) { color:pink }
  @include mq(tablet) { color:blue }
  @include mq(phone) { color:green }
}
*/

// Breakpoints
$small:   960px   !default; // 1024 eg. common resolution PC
$medium:  520px   !default; // eg. portrait iPad

@mixin mq($media) {
  @if $media == phone {
    @media (max-width: $small) { @content; }
  }
  @else if $media == tablet {
    @media (min-width: $small + 1) and (max-width: $medium - 1) { @content; }
  }
  @else if $media == labtop {
    @media (min-width: $medium) { @content; }
  }
}


// orientation (horizontal & vertical)
@mixin mq-portrait   { @media (orientation:portrait)     { @content } }
@mixin mq-landscape  { @media (orientation:landscape)    { @content } }
// shortcuts
@mixin mq-h          { @include media-portrait           { @content } }
@mixin mq-v          { @include media-landscape          { @content } }

// high resolution screen
@mixin mq-highres($coefficient: 2)
{
  $oCoef: $coefficient*2;
  @media
    (-webkit-min-device-pixel-ratio: $coefficient),
    (-moz-min-device-pixel-ratio: $coefficient),
    (-o-min-device-pixel-ratio: $oCoef/2),
    (min-device-pixel-ratio: $coefficient)
  {
    @content;
  }
}