Skip to content

Instantly share code, notes, and snippets.

@chrisbuttery
Forked from jnowland/svg-logo.scss
Created November 19, 2012 10:28
Show Gist options
  • Save chrisbuttery/4110007 to your computer and use it in GitHub Desktop.
Save chrisbuttery/4110007 to your computer and use it in GitHub Desktop.
Logo mixin to include fallback SVG
// Im not really sure what your intention is for this mixin.
// Originally it looked like you were including this mixin to a parent class,
// that would then create the .logo styles along with .svg & .no-svg fallback classes.
// This example includes the mixin to .logo since we know its going to exist anyhow.
// Dont know if it actuualy helps you, I'd need more info.
@mixin svg-logo($img-name) {
// Compass cant get an image width/height from just a name, its needs an actual image,
// which wouldnt work in this case.
// height:image-height($img)
// width:image-width($img);
.svg & {
background: image-url("logo/#{$img-name}.svg") no-repeat;
}
.no-svg & {
background: image-url("logo/#{$img-name}.png") no-repeat;
}
}
.logo {
@include svg-logo('test');
display:block;;
height: 100px;
overflow:hidden;
text-indent:-9999em;
width: 100px;
}
// outputs
//.svg .logo {
// background: url('../img/logo/test.svg') no-repeat;
//}
//.no-svg .logo {
// background: url('../img/logo/test.png') no-repeat;
//}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment