Published on October 12, 2012

css html mixin scss

Saw it on 37signals website, an easy way to do Retina-ready images through CSS if you have SCSS installed.

[code language=“css”]@mixin image-2x($image, $width, $height) {

@media (min–moz-device-pixel-ratio: 1.3),

(-o-min-device-pixel-ratio: 2.62),

(-webkit-min-device-pixel-ratio: 1.3),

(min-device-pixel-ratio: 1.3),

(min-resolution: 1.3dppx) {

/* on retina, use image that’s scaled by 2 */

background-image: url($image);

background-size: $width $height;

}

}[/code]

Usage:

[code language=“css”]div.logo {

background: url(“logo.png”) no-repeat;

@include image-2x(“logo2x.png”, 100px, 25px);

}[/code]

It has also been modified to include Google Nexus 7 with it’s 1.3 pixel ratio as a retina-capable device.

comments powered by Disqus