Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

// 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: map-get($mins, $device);
  $max-width: if($only == true, map-get($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;
  }
}