« Back to Index

Example of passing a code block to a Mixin to make it more flexible (especially for displaying retina content)

View original Gist on GitHub

retina.scss

@mixin retina {
    /* Target any and all high-density screens on any browser currently known (October 2012) */
    @media (min--moz-device-pixel-ratio: 1.5), 
           (-o-min-device-pixel-ratio: 3/2), 
           (-webkit-min-device-pixel-ratio: 1.5), 
           (min-resolution: 1.5dppx) {
        @content;
    }
}

@include retina {
    background: url(../Images/Retina/logo_2x.png) 0 0 no-repeat;
    background-size: 286px;
}