responsive-devices.scss

// Easy Responsive Devices
///////////////
//
// Aiming for simpler media queries,
// rather than writing the following CSS:
//
// @media only screen and (max-width: 605px) { ... css for phones ... }
// @media only screen and (min-width: 606px) and (max-width: 767px) { ... css for phablets ... }
// @media only screen and (min-width: 768px) and (max-width: 1023px) { ... css for tablets ... }
// @media only screen and (min-width: 1024px) { ... css for desktops ... }
//
// You can instead do:
// @include device(phone) { ... css for phones ... }
// @include device(phablet) { ... css for phablets ... }
// @include device(tablet) { ... css for tablets ... }
// @include device(desktop) { ... css for desktops ... }
// 
// You can target multiple devices by combining them,
// ordering from smallest to largest
// @include device(phone, phablet) { ... css for phones and phablets ... }
// @include device(phone, phablet, tablet) { ... css for phones, phablets and tablets }
//

// Device sizes
$phones: 605px;
$phablets: 768px;
$tablets: 1024px;

// Device Mixin
@mixin device($dev1, $dev2: null, $dev3: null) {

  // Phones
  @if $dev1 == phone {
    @if $dev2 == phablet and $dev3 == tablet {
      @media only screen and (max-width: $tablets - 1) { @content; }
    }
    @else if $dev2 == phablet {
      @media only screen and (max-width: $phablets - 1) { @content; }
    }
    @else {
      @media only screen and (max-width: $phones) { @content; }
    }
  }

  // Phablets
  @else if $dev1 == phablet {
    @if $dev2 == tablet and $dev3 == desktop {
      @media only screen and (min-width: $phones + 1) { @content; }
    }
    @else if $dev2 == tablet {
      @media only screen and (min-width: $phones + 1) and (max-width: $tablets - 1) { @content; }
    }
    @else {
      @media only screen and (min-width: $phones + 1) and (max-width: $phablets - 1) { @content; }
    }
  }

  // Tablets
  @else if $dev1 == tablet {
    @if $dev2 == desktop {
      @media only screen and (min-width: $phablets) { @content; }
    }
    @else {
      @media only screen and (min-width: $phablets) and (max-width: $tablets - 1) { @content; }
    }
  }

  // Desktops
  @else if $dev1 == desktop {
    @media only screen and (min-width: $tablets) { @content; }
  }
}