Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v0.7.0)
// ----

@function get-value($list-map, $key) {
    @each $pair in $list-map { 
        @if nth($pair, 1) == $key {
            @return nth($pair, 2);
        }
    }

    @return null;
}

// variables.scss
$screen-xs-max: 767px;
$screen-sm: $screen-xs-max + 1px;
$screen-sm-max: 991px;
$screen-md: $screen-sm-max + 1px;
$screen-md-max: 1199px;
$screen-lg: $screen-md-max + 1px;
 
// mixins.scss
@mixin media($device, $only: false) {
  
  $mins: 
    phone -1,
    tablet $screen-sm,
    tablet-h $screen-md,
    desktop $screen-lg;
  $maxs: 
    phone $screen-xs-max,
    tablet $screen-sm-max,
    tablet-h $screen-md-max,
    desktop -1;
  
  $min-width: get-value($mins, $device);
  $max-width: if($only == true, get-value($maxs, $device), -1);
  
  @if ($max-width == -1) {
    @media screen and (min-width: $min-width) {
      @content;
    }
  }
  @else if ($min-width == -1) {
    @media screen and (max-width: $max-width) {
      @content;
    }
  }
  @else {
    @media screen and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
}
 
// view or component
.foo {
  @include media(tablet, true) {
    content: tablet-only;
  }
  @include media(tablet-h) {
    content: tablet-h;
  }
}

SassMeister-output.css

@media screen and (min-width: 768px) and (max-width: 991px) {
  .foo {
    content: tablet-only; } }
@media screen and (min-width: 992px) {
  .foo {
    content: tablet-h; } }