/** * 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: 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 , 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}@2x.@{extension})"`; background-repeat: @repeat; @media print, screen, (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { // on retina, use image that's scaled by 2 background-image: ~`"url(@{filename}@2x.@{extension})"`; background-size: @width @height; } } .image-logo { width: 100px; height: 50px; .image-2x('image.png', 134px, 52px); } .reapeating-background-image { background-color: #444; .image-2x('image.png', 200px, 200px, repeat); }