Generated by SassMeister.com.

SassMeister-input.scss

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

// List map-like value getter
// -------------------

// To simulate associative arrays
// Source: http://hugogiraudel.com/2013/08/12/sass-functions/#mapping
@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;
}

$site-breakpoints: (
  "small": "22.5em", //360px
  "medium": "45em", //720px
  "large": "67.5em", //1080px
);

// Query (new version of respond-to)
@mixin query($breakpoint) {
    $val: map-getter($site-breakpoints, $breakpoint);

    @if $val == false {
        @if type-of($breakpoint) == number {
            @media only screen and ("min-width": $breakpoint) {
                @content;
            }
        }
        @else {
            @error "QUERY MIXINS ERROR: INVALID ARGUMENT"
        }
    }
    @else {
        @media only screen and ("min-width": $val) {
            @content;
        }
    }
};

.body {
  @include query("small") {
    color: red;
  }
  @include query("medium") {
    color: red;
  }
  @include query("large") {
    color: red;
  }
  @include query(768px) {
    color: red;
  }
  @include query(50em) {
    color: red;
  }
}

SassMeister-output.css

@media only screen and (min-width: 22.5em) {
  .body {
    color: red;
  }
}
@media only screen and (min-width: 45em) {
  .body {
    color: red;
  }
}
@media only screen and (min-width: 67.5em) {
  .body {
    color: red;
  }
}
@media only screen and (min-width: 768px) {
  .body {
    color: red;
  }
}
@media only screen and (min-width: 50em) {
  .body {
    color: red;
  }
}