Last active
January 3, 2016 09:39
-
-
Save macgyver/8444205 to your computer and use it in GitHub Desktop.
Less mixin to pivot between two background images based on device pixel density.Please provide feedback, I'm always interested in pontificating on how to format these disgusting media queries for readability!
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
/* use the first form if the @2x image is the same url with "@2x" inserted before the extension */ | |
.responsive-background(@url-1x, @background-size) { | |
@url-2x: ~`@{url-1x}.replace(/(\.[a-z0-9]{2,4})$/i, '@2x$1')`; | |
.responsive-background(@url-1x, @url-2x, @background-size); | |
} | |
/* use the second form to specify the url for the @2x image manually */ | |
.responsive-background(@url-1x, @url-2x, @background-size) { | |
display: inline-block; | |
text-indent: -9999px; | |
background: transparent url(@url-1x) no-repeat; | |
@media | |
only screen and ( min--moz-device-pixel-ratio: 1.5 ), | |
only screen and (-webkit-min-device-pixel-ratio: 1.5 ), | |
only screen and ( min-device-pixel-ratio: 1.5 ), | |
only screen and ( -o-min-device-pixel-ratio: ~"3/2") { | |
background-image: url(@url-2x); | |
background-size: @background-size; | |
} | |
} | |
/* Notes: | |
- @background-size should be the dimensions of the 1x image. | |
- the mixin refrains from setting height/width in order to support full-size images | |
as well as sprites which contain many areas intended to be used independently. | |
- the 'text-indent' property may be omitted, especially if you use an "alt" attribute | |
rather than text nodes in your markup to describe the element for accessibility . */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment