Media Queries with Stylus

_media-queries.styl

// Media Queries in Stylus
//
// Inspired by Anthony Short's _media-queries.scss to Stylus.
// https://gist.github.com/anthonyshort/2028061
//
// Usage:
//
//   @media tablet-portrait-and-below
//     margin: 0
//     ...
//

$mq-mobile-portrait  = 320px
$mq-mobile-landscape = 480px
$mq-tablet-portrait  = 768px
$mq-tablet-landscape = 1024px
$mq-desktop          = 1382px

// Both portrait and landscape
mobile-only = "max-width : " + $mq-mobile-landscape + ")"

// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
mobile-portrait-only = "max-width : " + $mq-mobile-portrait + ")"

// Everything up to and including the mobile portrait
mobile-portrait-and-below = "max-width : " + $mq-mobile-portrait + ")"

// Everything above and including the mobile portrait
mobile-portrait-and-up = "min-width : " + $mq-mobile-portrait + ")"

// Everthing larger than a portrait mobile up until mobile landscape
mobile-landscape-only = "only screen and (min-width : " + ($mq-mobile-portrait + 1) + ") and (max-width : " + $mq-mobile-landscape + ")"

// Everything up to and including the mobile landscape width
mobile-landscape-and-below = "only screen and (max-width : " + $mq-mobile-landscape + ")"

// Everything above and including the mobile landscape width
mobile-landscape-and-up = "only screen and (min-width : " + ($mq-mobile-portrait + 1) + ")"

// Both the portrait and landscape width of the tablet
// Larger than a landscape mobile but less than or equal to a landscape tablet
tablet-only = "only screen and (min-width : " + ($mq-mobile-landscape + 1) + ") and (max-width : " + $mq-tablet-landscape + ")"

// Everything larger than mobile landscape up until the portrait width of the tablet
tablet-portrait-only = "only screen and (min-width : " + ($mq-mobile-landscape + 1) + ") and (max-width : " + $mq-tablet-portrait + ")"

// Everything below and including the portrait width of the tablet
tablet-portrait-and-below = "only screen and (max-width : " + $mq-tablet-portrait + ")"

// Everything above and including the portrait width of the tablet
tablet-portrait-and-up = "only screen and (min-width : " + ($mq-mobile-landscape + 1) + ")"

// Larger than portrait but less than or equal to the landscape width
tablet-landscape-only = "only screen and (min-width : " + ($mq-tablet-portrait + 1) ") and (max-width : " + $mq-tablet-landscape + ")"

// Up to and including the tablet landscape
tablet-landscape-and-below = "only screen and (max-width : " + $mq-tablet-landscape + ")"

// Everything larger than portrait tablet
tablet-landscape-and-up = "only screen and (min-width : " + ($mq-tablet-portrait + 1) + ")"

// Everything larger than a landscape tablet
desktop-and-up = "only screen and (min-width : " + ($mq-tablet-landscape + 1) + ")"

// Everything below and including the desktop
desktop-and-below = "only screen and (max-width : " + $mq-desktop + ")"

// Everything larger than a landscape tablet but less than or equal to the desktop
desktop-only = "only screen and (min-width : " + ($mq-tablet-landscape + 1) + ") and (max-width : " + $mq-desktop + ")"

// Everything below and including the desktop
large-desktop-and-up = "only screen and (min-width : " + ($mq-desktop + 1) + ")"

// Retina screens have a 1.5 pixel ratio, not 2
retina = "only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)"