media-resolution.sass

I created this library before Autoprefixer handle resolution rule, and now I just removed prefixes from Sass code and don't want to rewrite a whole readme.

Media Queries Resolution feature Sass polyfill

If you want to engage your stylesheet with “retina-ready” images (actually hdpi or xhdpi) with @2x size for example you need to wrap your style with a huge @media query:

@media print,
	(-webkit-min-device-pixel-ratio: 1.5), // For WebKit/Blink
	(min--moz-device-pixel-ratio: 1.5), // For old Firefox
	(-o-min-device-pixel-ratio: 3 / 2), // For old Opera
	(min-device-pixel-ratio: 1.5), // Old unprefixed syntax
	(min-resolution: 144dpi), // Actual
	(min-resolution: 1.5dppx) { // Future
    .image {
      background-image: url("image@2x.png");
      }

Looking bad, do you?

I suggest a better way to do this: for anything you do with stylesheets there is a Sass mixin! Or Ruby Sass extension, if you are CSS geek. Or Grunt/Gulp task.

Using

+screen-xhdpi
	background-image: url('image@2x.png')

Will return you this CSS:

@media print, (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
	.image {
		background-image: url("image@2x.png"); }

Remember that xhdpi is like Retina in Android terminology and equals to 2dppx/144dpi.

Or you can use it harder:

+max-resolution(2)
	.image
		background-image: url('image@2x.png')

Or even harder with loops:

@each $prefix, $dppx in ((max, 1), (min, 1.1))
    .image
        +resolution($prefix, $dppx)
            $dppx: ceil($dppx)
            background-image: url('image@'+$dppx+'x.png')

See tests/ for more information about how it works.

Available mixins

Name	Purpose
=resolution($prefix, $dppx)	Base mixin to omit prefixes and browser specificities
=min-resolution($dppx)	Predefined +resolution mixin with $prefix: min
=max-resolution($dppx)	Predefined +resolution mixin with $prefix: max
=screen-mdpi	Predefined +min-resolution mixin with $dppx: $resolution-mdpi (1)
=screen-hdpi	Predefined +min-resolution mixin with $dppx: $resolution-hdpi (1.5)
=screen-xhdpi	Predefined +min-resolution mixin with $dppx: $resolution-xhdpi (2.0)

All mixins are predefined for ease of use.

If you want to use more predefined things such as +max-resolution predeterminations with all resolutions – you are welcome to PR or just add an issue.

Variables

Important part of a whole system is resolution variables based on Google's specification:

$resolution-mdpi: 1
$resolution-hdpi: 1.5
$resolution-xhdpi: 2.0

Install via Bower

bower install --save sass-media-resolution

Import the Sass file:

@import bower_components/sass-media-resolution/media-resolution.sass

Or use your favorite build system to do this. Like klei/grunt-injector, see how it works at larsonjj/generator-yeogurt, I hope you can tell me how to include automatically all my Bower-installed Sass extensions.

Test

Simply cd to test/ folder and run a regular Sass compiler:

sass test.sass test.css

Or do it with your favorite Sass tool like CodeKit, Prepros, grunt-contrib-sass, gulp-ruby-sass or anything else.

Reference

• There is an issue #122 on Autoprefixer that depends on Can I Use database update. When it will be updated, this repository will not needed anymore for those who using Autoprefixer. But we need to wait. I hate waiting.
• PPI Calculator – if you want to know how much ppi you screen have.

Thanks

• Thank you David Lindkvist for SASS resolution media query mixin, this repository based on his gist.
• Thank you Andrey Sitnik for Autoprefixer, my work are inspired by first early releases of your great tool that breaks the chains of prefixes.