hidpi()
is a Sass mixin that seamlessly serves high resolution
background images to high density (Retina-like) displays. It comes with a
debug mode to test Retina graphics on a regular display.
bower install sass-hidpi
@import 'path/to/hidpi';
Perfect, you can now use the mixin in your Sass project.
You can virtually pass anything to the mixin and it will be displayed on high density displays.
In this example, the border color of the #logo
element is:
#logo {
background: url('../images/logo.png') no-repeat;
border: 1px solid blue;
@include hidpi {
background-image: url('../images/logo_x2.png');
background-size: 250px 188px;
border-color: red;
}
}
Compiles to:
#logo {
background: url("../images/logo.png") no-repeat;
border: 1px solid blue;
}
@media (-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi),
(min-resolution: 1.3dppx) {
#logo {
background-image: url("../images/logo_x2.png");
background-size: 250px 188px;
border-color: red;
}
}
When passing the name of an image as an argument, hidpi()
serves the
equivalent high-resolution image on high-definition displays.
Image files should be named as follows, placed in the images
folder
of your Compass project:
image.png
: default imageimage_x2.png
: high-resolution image#logo-auto {
@include hidpi(logo);
}
Compiles to:
#logo-auto {
background-image: url('../images/logo.png');
}
@media (-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi),
(min-resolution: 1.3dppx) {
#logo-auto {
background-image: url('../images/logo_x2.png');
background-size: 250px 188px;
}
}
Note: this feature requires Compass.
You can force hidpi()
to always serve high-resolution graphics and test
the rendering on a standard, non-Retina display.
Set the $hidpi-debug
variable to true
:
#logo-auto-debug {
$hidpi-debug: true; // Force high-resolution graphics on standard displays
@include hidpi(logo);
}
Compiles to:
#logo-auto-debug {
background-image: url('../images/logo_x2.png');
background-size: 250px 188px;
}
It loads logo_x2.png
by default (no @media
queries).
hidpi(image)
is looking by default for images/image.png
.
If your image is a JPEG, for example image.jpg
, you should specify it as
a second argument:
#image-jpeg {
@include hidpi(image, jpg);
}
Same story with a GIF:
#image-gif {
@include hidpi(image, gif);
}
@include hidpi {}
)@include hidpi(image);
)Note: Compass is only needed when passing arguments to hidpi()
instead of
a content-block.