Generated by SassMeister.com.

MediaQuery.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----


@function calculate-ranges($breaks) {
  $ranges: ();
  $length: length($breaks);
  @for $i from 1 through $length - 1 {
    $ranges: append($ranges, (nth($breaks, $i), nth($breaks, $i + 1) - 1));
  }
  $ranges: append($ranges, nth($breaks, $length));
  @return $ranges; 
}

@mixin media2 ($query, $offset: 0px 0px) {
  $ranges: ();
  $A: nth($query, 1);
  $B: 0px;
  $min: $A;
  $max: $B;
  $length: length($media-ranges);
  
  // Make sure offset has 2 values
  @if(length($offset) == 1) {
    $offset: $offset $offset;
  }
  
  // Set second query value
  @if length($query) > 2 {
    $B: nth($query, 3);
  }
  
  @for $i from 1 through $length {
    $range: nth($media-ranges, $i);
    @if $A >= nth($range, 1) {
      @if $i == $length or $A <= nth($range, 2) {
        $ranges: append($ranges, $i);
        range-A: $range;
      }
    }
    
    @if $B > 0 and $B >= nth($range, 1) {
      @if $i == $length or $B <= nth($range, 2) {
        $ranges: append($ranges, $i);
        range-B: $range;
      }
    }
  }
  
  @if length($query) == 1 {
    $range: nth($media-ranges, nth($ranges, 1));
    $A: max(nth($range, 1), $A);
    
    @if length($range) > 1 {
      $B: nth($range, 2);
    }
    
    min: $A;
    max: $B;
  } @else if length($query) == 2 {
    $range: nth($media-ranges, nth($ranges, 1));

  }
  
  ranges: $ranges;
  
  $max-range: max($ranges...);
  $min-range: min($ranges...);
  
  @if length($query) > 1 {
    @if nth($query, 2) == to {
      to: true;
    }
  }
  
  max-range: $max-range;
  min-range: $min-range;
  

  
  @each $break in $breakpoints {
    
  }
  
  breakpoints: $breakpoints;
  
  query-length: length($query);
  offset: $offset;
  
  @each $arg in $query {
    content: $arg;
  }
  
  $min: min($A, $B) + nth($offset, 1);
  $max: max($A, $B) + nth($offset, 2);
  
  @if($B > 0) {
    @media only screen and (min-width: $min) and (max-width: $max) {
      @content;
    }
  }
}

$phone:   320px;
$tablet:  768px;
$laptop:  1025px;
$desktop: 1281px;
$cinema:  1601px;
$breakpoints: $phone $tablet $laptop $desktop $cinema;
$media-ranges: calculate-ranges($phone $tablet $laptop $desktop $cinema);

.ranges {
  content: $media-ranges;
  @each $range in $media-ranges {
    range: $range;
  }
}

.test {
  @include media2($desktop + 5px) {
    query: "$desktop + 5px";
  }
}

.test {
  @include media2($cinema) {
    query: "$cinema";
  }
}

.test {
  @include media2($tablet) {
    query: "$tablet";
  }
}

.test {
  @include media2($laptop + 2px to $tablet + 2px) {
    query: "$laptop + 2px to $tablet + 2px"; 
  }
}

.test {
  @include media2($tablet to $laptop + 2px) {
    query: "$tablet to $laptop + 2px"; 
  }
}

.test {
  @include media2($desktop, 2px) {
    query: "$desktop, 2px"; 
  }
}

.test {
  @include media2($desktop, 2px -2px) {
    query: "$desktop, 2px -2px"; 
  }
}

.test {
  @include media2($tablet to $laptop) {
    query: "$tablet to $laptop + 2px"; 
  }
}

.test {
  @include media2($laptop down) {
    query: "$laptop down"; 
  }
}

.test {
  @include media2($phone up) {
    query: "$phone up";
  }
}

.test {
  @include media2($tablet) {
    query: "$phone up";
  }
}

x-output.css

.ranges {
  content: 320px, 767px 768px, 1024px 1025px, 1280px 1281px, 1600px 1601px;
  range: 320px, 767px;
  range: 768px, 1024px;
  range: 1025px, 1280px;
  range: 1281px, 1600px;
  range: 1601px;
}

.test {
  range-A: 1281px, 1600px;
  min: 1286px;
  max: 1600px;
  ranges: 4;
  max-range: 4;
  min-range: 4;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 1;
  offset: 0px 0px;
  content: 1286px;
}
@media only screen and (min-width: 1286px) and (max-width: 1600px) {
  .test {
    query: "$desktop + 5px";
  }
}

.test {
  range-A: 1601px;
  min: 1601px;
  max: 0px;
  ranges: 5;
  max-range: 5;
  min-range: 5;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 1;
  offset: 0px 0px;
  content: 1601px;
}

.test {
  range-A: 768px, 1024px;
  min: 768px;
  max: 1024px;
  ranges: 2;
  max-range: 2;
  min-range: 2;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 1;
  offset: 0px 0px;
  content: 768px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .test {
    query: "$tablet";
  }
}

.test {
  range-B: 768px, 1024px;
  range-A: 1025px, 1280px;
  ranges: 2 3;
  to: true;
  max-range: 3;
  min-range: 2;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 3;
  offset: 0px 0px;
  content: 1027px;
  content: to;
  content: 770px;
}
@media only screen and (min-width: 770px) and (max-width: 1027px) {
  .test {
    query: "$laptop + 2px to $tablet + 2px";
  }
}

.test {
  range-A: 768px, 1024px;
  range-B: 1025px, 1280px;
  ranges: 2 3;
  to: true;
  max-range: 3;
  min-range: 2;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 3;
  offset: 0px 0px;
  content: 768px;
  content: to;
  content: 1027px;
}
@media only screen and (min-width: 768px) and (max-width: 1027px) {
  .test {
    query: "$tablet to $laptop + 2px";
  }
}

.test {
  range-A: 1281px, 1600px;
  min: 1281px;
  max: 1600px;
  ranges: 4;
  max-range: 4;
  min-range: 4;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 1;
  offset: 2px 2px;
  content: 1281px;
}
@media only screen and (min-width: 1283px) and (max-width: 1602px) {
  .test {
    query: "$desktop, 2px";
  }
}

.test {
  range-A: 1281px, 1600px;
  min: 1281px;
  max: 1600px;
  ranges: 4;
  max-range: 4;
  min-range: 4;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 1;
  offset: 2px -2px;
  content: 1281px;
}
@media only screen and (min-width: 1283px) and (max-width: 1598px) {
  .test {
    query: "$desktop, 2px -2px";
  }
}

.test {
  range-A: 768px, 1024px;
  range-B: 1025px, 1280px;
  ranges: 2 3;
  to: true;
  max-range: 3;
  min-range: 2;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 3;
  offset: 0px 0px;
  content: 768px;
  content: to;
  content: 1025px;
}
@media only screen and (min-width: 768px) and (max-width: 1025px) {
  .test {
    query: "$tablet to $laptop + 2px";
  }
}

.test {
  range-A: 1025px, 1280px;
  ranges: 3;
  max-range: 3;
  min-range: 3;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 2;
  offset: 0px 0px;
  content: 1025px;
  content: down;
}

.test {
  range-A: 320px, 767px;
  ranges: 1;
  max-range: 1;
  min-range: 1;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 2;
  offset: 0px 0px;
  content: 320px;
  content: up;
}

.test {
  range-A: 768px, 1024px;
  min: 768px;
  max: 1024px;
  ranges: 2;
  max-range: 2;
  min-range: 2;
  breakpoints: 320px 768px 1025px 1281px 1601px;
  query-length: 1;
  offset: 0px 0px;
  content: 768px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .test {
    query: "$phone up";
  }
}