Skip to content

Instantly share code, notes, and snippets.

@trey

trey/sass-retina-media-query.md

Created August 12, 2013 19:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save trey/6214511 to your computer and use it in GitHub Desktop.
Save trey/6214511 to your computer and use it in GitHub Desktop.
Download ZIP
Set a Sass variable for a Retina media query.
Raw
sass-retina-media-query.md

Set a Sass variable for a Retina media query.

Define it like this.

$retina_display: "(-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3)";

Use it like this.

#logo {
    background: url(../img/logo.png) no-repeat 0 0;
    width: 168px;
    height: 67px;
    @media #{$retina_display} {
        background: url(../img/logo@2x.png) no-repeat 0 0;
        background-size: 168px 67px;
    }
}

Source

@trey
Copy link
Author

trey commented Aug 12, 2013

This is a Solutions Log post.

@trey
Copy link
Author

trey commented Aug 12, 2013

Bourbon does this out of the box.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment