link Icon changelog.com

Sass Media Queries, a collection of useful media queries mixins for Sass

From the project homepage:

Sass Media Queries is a collection of useful media queries mixins (including iOS devices like iPhones and iPads) for Sass 3.2.0+

TL;DR

Sass Media Queries adds support for @media query Sass mixins (including iOS devices like iPhones and iPads) for Sass 3.2.0+, and is also Compass and Bourbon safe.

Requirements:
  Sass 3.2.0+

Version:
  2.1                                     // developed on 16/02/2013

Variables:
  $units: 1px;                            // default units for 'screen' mixins - it must include a digit!

Mixins:
  @include min-screen(width)              // shortcut for @media screen and (min-width ...)
  @include max-screen(width)              // shortcut for @media screen and (max-width ...)
  @include screen(min-width, max-width)   // shortcut for @media screen and (min-width ...) and (max-width ...)
  ---
  @include iphone3                        // only iPhone (2, 3G, 3GS) landscape & portrait
  @include iphone3-landscape              // only iPhone (2, 3G, 3GS) only landscape
  @include iphone3-portrait               // only iPhone (2, 3G, 3GS) only portrait
  ---
  @include iphone4                        // only iPhone (4, 4S) landscape & portrait
  @include iphone4-landscape              // only iPhone (4, 4S) only landscape
  @include iphone4-portrait               // only iPhone (4, 4S) only portrait
  ---
  @include iphone5                        // only iPhone (5) landscape & portrait
  @include iphone5-landscape              // only iPhone (5) only landscape
  @include iphone5-portrait               // only iPhone (5) only portrait
  ---
  @include ipad                           // only iPad (1, 2, Mini) landscape & portrait
  @include ipad-landscape                 // only iPad (1, 2, Mini) only landscape
  @include ipad-portrait                  // only iPad (1, 2, Mini) only portrait
  ---
  @include ipad-retina                    // only iPad (3, 4) landscape & portrait
  @include ipad-retina-landscape          // only iPad (3, 4) only landscape
  @include ipad-retina-portrait           // only iPad (3, 4) only portrait
  ---
  @include retina                         // devices with retina

Now it's easy to do stuff like:

@include min-screen(320)  { ... }
@include max-screen(1024) { ... }
@include screen(320, 640) { ... }

And get back this when compiled to CSS:

@media screen and ( min-width: 320px) ) { ... }
@media screen and ( max-width: 1024px ) { ... }
@media screen and ( min-width: 320px ) and ( max-width: 640px ) { ... }

Check out the project from Rafal Bromirski on GitHub and also the simple, yet neat "resize me" demo.

Discuss on Hacker News if you must.

0:00 / 0:00