-
-
Save brandonb927/3874012 to your computer and use it in GitHub Desktop.
| I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss) | |
| .image-2x(@image, @width, @height) { | |
| @media only screen and (-webkit-min-device-pixel-ratio: 1.25), | |
| only screen and (-o-min-device-pixel-ratio: 5/4), | |
| only screen and (min--moz-device-pixel-ratio: 1.25), | |
| only screen and (min-device-pixel-ratio: 1.25), | |
| only screen and (min-resolution: 120dpi) { | |
| /* on retina, use image that's scaled by 2 */ | |
| background-image: url('@{image}'); | |
| background-size: @width @height; | |
| } | |
| } | |
| .image-logo { | |
| width: 100px; | |
| height: 50px; | |
| background: url('image.png') no-repeat; | |
| .image-2x('image@2x.png', 134px, 52px); | |
| } |
@kamranayub cheers.
Now working fine in CodeKit for Mac.
@kamranayub Thanks for the comment, I'm sure other users will find that helpful!
I've ammended this Gist based on the Wordpress Core which seems to target far more devices than mine. Thanks @WordPress! <3
- This is nice. I'm gonna use it. Thanks for making & maintaining this gist!
- I think this can be cleaned up a bit...several unnecessary or redundant tests. In WordPress' implementation, http://core.trac.wordpress.org/ticket/22238#comment:5 notes the reasons for only needing 3 particular tests. Now, I could definitely be wrong or missing some edge cases you're tracking...but if that's case, I'd love to know, and also see notes made.
@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 :)
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.
Note, if you try this using Mindscape Web Workbench's compiler (for us Visual Studio users), it will most likely fail. To fix it, put the media query value into a variable like this:
Then use it like this:
That will work.