Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, praesentium ipsam officia ratione laboriosam, aspernatur, consequatur dolorem quibusdam minima at, fuga aliquam? Maxime architecto, nesciunt ea impedit mollitia! Nesciunt, quia.</p>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

@function map-getter($listmap, $value) {
    @each $item in $listmap {
        $index: index($item, $value);
        @if $index { 
            $return: if($index == 1, 2, $index);
            @return nth($item, $return); 
        }
    }
    @return false;
}

$breakpoints: (
  'small': '22.5em', //360px
  'small portrait': ('22.5em', 'portrait'),
  'medium': '45em', //720px
  'medium portrait': ('45em', 'portrait'),
  'large': '67.5em', //1080px
  'large portrait': ('67.5em', 'portrait')
);

@mixin query($breakpoint, $orientation: 'none') {
  $val: map-getter($breakpoints, $breakpoint);
  @if $val == false {
    @if type-of($breakpoint) == number {
      @if $orientation != 'none' {
        @media only screen and ("min-width": $breakpoint) and ("orientation": $orientation) {
          @content;
        }
      }
      @else {
        @media only screen and ("min-width": $breakpoint) {
          @content;
        }
      }
    }
    @else {
      @error 'QUERY MIXINS ERROR: INVALID ARGUMENT'
    }
  }
  @else {
    @if type-of($val) == list {
      @media only screen and ("min-width": nth($val, 1)) and ("orientation": nth($val, 2)) {
        @content;
      }
    }
    @else {
      @if $orientation != 'none' {
        @media only screen and ("min-width": $val) and ("orientation": $orientation) {
          @content;
        }
      }
      @else {
        @media only screen and ("min-width": $val) {
          @content;
        }
      }
    }
  }
};

body {
  @include query('small', 'landscape') {text-transform: uppercase;};
  @include query('small portrait') {background: red;};
  @include query('medium') { border: 5px solid green;};
  @include query('large') { font-weight: bold;};
  @include query('large portrait') {padding: 100px;};
  @include query(80, landscape) {margin: 80px;};
}

SassMeister-output.css

@media only screen and (min-width: 22.5em) and (orientation: landscape) {
  body {
    text-transform: uppercase;
  }
}
@media only screen and (min-width: 22.5em) and (orientation: portrait) {
  body {
    background: red;
  }
}
@media only screen and (min-width: 45em) {
  body {
    border: 5px solid green;
  }
}
@media only screen and (min-width: 67.5em) {
  body {
    font-weight: bold;
  }
}
@media only screen and (min-width: 67.5em) and (orientation: portrait) {
  body {
    padding: 100px;
  }
}
@media only screen and (min-width: 80) and (orientation: landscape) {
  body {
    margin: 80px;
  }
}

SassMeister-rendered.html

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, praesentium ipsam officia ratione laboriosam, aspernatur, consequatur dolorem quibusdam minima at, fuga aliquam? Maxime architecto, nesciunt ea impedit mollitia! Nesciunt, quia.</p>