Instantly share code, notes, and snippets.

@jdelia /_header-scss
Last active Feb 18, 2016

Embed
What would you like to do?
Retina Image for Utility Pro using Sass
/* Logo, hide text */
.header-image .site-title > a {
@include imgRetina(images/logo, png, 300px, 60px, center);
float: left;
min-height: 80px;
width: 100%;
@include media($medium-screen-up) {
@include imgRetina(images/logo, png, 300px, 60px, left);
}
}
/* mixins
* Generates the image in either standard size or retina display version
*/
@mixin imgRetina($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
background: url($image + '.' + $extension) $repeat $position;
@media
screen and (-webkit-min-device-pixel-ratio: 2),
screen and ( min--moz-device-pixel-ratio: 2),
screen and ( -moz-min-device-pixel-ratio: 2),
screen and ( -o-min-device-pixel-ratio: 2/1),
screen and ( min-device-pixel-ratio: 2),
screen and ( min-resolution: 192dpi),
screen and ( min-resolution: 2dppx) {
background: url($image + '@2x' + '.' + $extension) $repeat $position;
background-size: $width $height;
}
}
/* Logo, hide text */
.header-image .site-title > a {
background: url(images/logo.png) no-repeat center;
float: left;
min-height: 80px;
width: 100%;
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.header-image .site-title > a {
background: url(images/logo@2x.png) no-repeat center;
background-size: 300px 60px;
}
}
@media screen and (min-width: 1023px) {
.header-image .site-title > a {
background: url(images/logo.png) no-repeat left;
}
}
@media screen and (min-width: 1023px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 1023px) and (min--moz-device-pixel-ratio: 2), screen and (min-width: 1023px) and (-moz-min-device-pixel-ratio: 2), screen and (min-width: 1023px) and (min-device-pixel-ratio: 2), screen and (min-width: 1023px) and (min-resolution: 192dpi), screen and (min-width: 1023px) and (min-resolution: 2dppx) {
.header-image .site-title > a {
background: url(images/logo@2x.png) no-repeat left;
background-size: 300px 60px;
}
}
/* Logo, hide text */
.header-image .site-title > a {
background: url(images/logo.png) no-repeat center;
float: left;
min-height: 60px;
width: 100%;
@include media($medium-screen-up) {
background: url(images/logo.png) no-repeat left;
}
}
/* Resets
---------------------------------------------------------------------------------------------------- */
@import "partials/reset";
/* # Variables
---------------------------------------------------------------------------------------------------- */
@import "partials/variables";
/* Mixins
---------------------------------------------------------------------------------------------------- */
@import "partials/mixins";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment