Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

// ==|=== EM calculator====================
//	Function that will calculate the em value based
//  on the browsers pixel value and 
//	return the em value to be used.
// =========================================================
$default-browser-em: 16px !default;

@function em-calculator ($size: $default-browser-em) {
	@return $size/$default-browser-em * 1em;
}


@function ec($size: $default-browser-em) {
	@return em-calculator($size);
}
// ==|=== End EM calculator====================

// ==|== media queries ======================================================
//   EXAMPLE Media Query for Responsive Design.
//   This example overrides the primary ('mobile first') styles
//   Modify as content requires.
//   ========================================================================== 

//Responsive
//-----------------------------
$screen: "only screen" !default;
$landscape: " and (orientation: landscape)" !default;
$portrait: " and (orientation: portrait)" !default;

$media-query-sizes: (
  small: (
    min: ec(320px),
    max: ec(767px)
  ),
  medium: (
    min: ec(768px),
    max: ec(1024px)
  ),
  large: (
    min: ec(1025px)
  )
);

@function media-label($media, $orientation: false) {
  @if(not map-has-key($media-query-sizes, $media)){
    @warn "the $media value needs to be one of the following #{map-keys($media-query-sizes)}";
    @return false;
  }
  
  $media-sizes: map-get($media-query-sizes, $media);
  
  $media-label: $screen + " and (min-width:#{map-get($media-sizes, 'min')})";
  
  @if(length($media-sizes) > 1) {
   $media-label: $media-label +  " and (max-width:#{map-get($media-sizes, 'max')})";
  }

  @if $orientation {
    @if $orientation == landscape {
      $media-label: $media-label + $landscape;
    } @else {
      $media-label: $media-label + $portrait;
    } 
  }
  
  @return $media-label;
}

@mixin respond-to($media, $orientation: false) {
  $media-query-label: media-label($media, $orientation);
  
  @if $media-query-label {
    @media #{media-label($media, $orientation)} {
      @content
    }
  }
}

// ==|== End media queries ====================================================== 


@include respond-to (small) {
  body {
    background-color: red;
  }
}

@include respond-to (small, landscape) {
  body {
    background-color: blue;
  }
}

@include respond-to (medium) {
  body {
    background-color: green;
  }
}

@include respond-to (medium, landscape) {
  body {
    background-color: yellow;
  }
}

@include respond-to (large) {
  body {
    background-color: black;
  }
}

@include respond-to (gubligock) {
  body {
    background-color: black;
  }
}

SassMeister-output.css

@media only screen and (min-width: 20em) and (max-width: 47.9375em) {
  body {
    background-color: red;
  }
}
@media only screen and (min-width: 20em) and (max-width: 47.9375em) and (orientation: landscape) {
  body {
    background-color: blue;
  }
}
@media only screen and (min-width: 48em) and (max-width: 64em) {
  body {
    background-color: green;
  }
}
@media only screen and (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
  body {
    background-color: yellow;
  }
}
@media only screen and (min-width: 64.0625em) {
  body {
    background-color: black;
  }
}