Skip to content

Instantly share code, notes, and snippets.

@rakeshjuyal
Last active August 29, 2015 14:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rakeshjuyal/4cf430ce9e90d9ea5295 to your computer and use it in GitHub Desktop.
Save rakeshjuyal/4cf430ce9e90d9ea5295 to your computer and use it in GitHub Desktop.
LESS mixin for retina images. ( _2x image for retina devices ). Direct port of https://gist.github.com/rakeshjuyal/0b2c614ca987a1f04ded
/*
Direct port of https://gist.github.com/rakeshjuyal/0b2c614ca987a1f04ded
Converted scss mixin to less.
*/
.retinafy(@file, @type : png, @width : auto, @height : auto, @suffix : _2x) {
background-image: url("@{file}.@{type}");
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
background-image: url("@{file}@{suffix}.@{type}");
background-size: @width @height;
}
}
/* Example */
.glass {
.retinafy( '/images/glass' , png , auto , 16px );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment