responsive mixins

_media.scss

$width-400: 375px; // small phones
$width-600: 576px; // large phones
$width-800: 768px; // tablets
$width-1000: 1024px; // small laptops / tablets landscape
$width-1200: 1280px; // desktops
$width-1600: 1536px; // large desktops

@mixin to-width($size) {
  @media screen and (max-width: $size - 1) {
    @content;
  }
}
@mixin for-width($size, $size-max: null) {
  @if $size-max {
    @media screen and (min-width: $size) and (max-width: $size-max - 1) {
      @content;
    }
  } @else {
    @media screen and (min-width: $size) {
      @content;
    }
  }
}
@mixin for-print {
  @media print {
    @content;
  }
}
@mixin for-landscape {
  @media screen and (orientation: landscape) {
    @content;
  }
}
@mixin for-portrait {
  @media screen and (orientation: portrait) {
    @content;
  }
}

@mixin for-mobile-small {
  @include for-width($width-400, $width-600) { @content; }
}
@mixin for-mobile {
  @include for-width($width-600, $width-800) { @content; }
}
@mixin for-tablet {
  @include for-width($width-800, $width-1000) { @content; }
}
@mixin for-laptop {
  @include for-width($width-1000, $width-1200) { @content; }
}
@mixin for-desktop {
  @include for-width($width-1200, $width-1600) { @content; }
}
@mixin for-desktop-large {
  @include for-width($width-1600) { @content; }
}