Skip to content

Instantly share code, notes, and snippets.

@flyingoctopus

flyingoctopus/image-2x.less

Forked from brandonb927/image-2x.less
Last active August 29, 2015 14:17
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 flyingoctopus/54fbb55a15b1d4d40dc4 to your computer and use it in GitHub Desktop.
Save flyingoctopus/54fbb55a15b1d4d40dc4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
image-2x.less
/**
* I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
*
* Update: 2014-08-04 - Updated a long-standing bug where retina images were shown no matter what in the first background-image property.
* - Updated retina media query to be more reliable ()
* Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html
* Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy
* Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
* Update: 2012-12-29 - Updated AGAIN to add MS IE10 declaration and fix wonky 'min--moz-' declaration which Mozilla engineers are aware of
* Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/)
* Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
*/
.image-2x(@image, @width, @height, @repeat: no-repeat) {
@filename : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
@extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
background-image: ~`"url(@{filename}.@{extension})"`;
background-repeat: @repeat;
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* on retina, use image that's scaled by 2 */
background-image: ~`"url(@{filename}@2x.@{extension})"`;
background-size: @width @height;
}
}
/**
* The filename convention for the retina-sized image is image@2x.png,
* but of course you can change this in the mixin when you use it
*/
.image-logo {
width: 100px;
height: 50px;
.image-2x('image.png', 100px, 50px);
}
.reapeating-background-image {
background-color: #444;
.image-2x('image.png', 200px, 200px, repeat);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment