Media query mixins.

media-query-mixins.scss

// Device sizes
$phone: 599px;
$tablet-portrait: 600px;
$tablet-landscape: 900px;
$desktop: 1200px;
$desktop-big: 1800px;

// Media queries
@mixin for-phone-only {
  @media (max-width: $phone) {
    @content;
  }
}

@mixin for-tablet-portrait-up {
  @media (min-width: $tablet-portrait) {
    @content;
  }
}

@mixin for-tablet-landscape-up {
  @media (min-width: $tablet-lanscape) {
    @content;
  }
}

@mixin for-desktop-up {
  @media (min-width: $desktop) {
    @content;
  }
}

@mixin for-big-desktop-up {
  @media (min-width: $desktop-big) {
    @content;
  }
}