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.
Discussion
Sign in or Join to comment or subscribe