Last active
December 1, 2019 15:38
-
-
Save brandonb927/3874012 to your computer and use it in GitHub Desktop.
@2x LESS CSS Mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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 [email protected], | |
| * 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); | |
| } |
I guess on line 14 there should NOT be @2x ?
@SpadarShut I forgot to update the example usage, it is correct now
You’ve still got the @2x on the non-retina background-image value.
Seeing false positives using that media query (i.e. Chrome on Mac is displaying the retina asset). The media query in Preboot is better and would improve this mixin. 😁
Thanks for the headsup @joshuabaker, that was actually a bug that was accidentally left in which I had fixed outside of this LESS file at some point.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@kbav some of the tests may be redundant I'm sure, I've left them in for legacy-sake. I will be doing som more thorough testing in the future so as to keep up on which test/edge cases are still necessary anymore. Also, gonna check out that @WordPress ticket.
Thanks for using my gist :)