Skip to content

Instantly share code, notes, and snippets.

@Bobz-zg
Created February 25, 2016 04:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Bobz-zg/87982c493a13ec75b6ba to your computer and use it in GitHub Desktop.
Save Bobz-zg/87982c493a13ec75b6ba to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
$icons-svg: (
sprite: (width: 132px, height: 88px, svgPath: '../images/sprite.svg'),
facebook: (width: 33.9px, height: 33.9px, backgroundX: 0px, backgroundY: 0px),
linkedin: (width: 33.9px, height: 33.9px, backgroundX: -43.9px, backgroundY: 0px),
pinterest: (width: 33.9px, height: 33.9px, backgroundX: 0px, backgroundY: -43.9px),
twitter: (width: 33.9px, height: 33.9px, backgroundX: -43.9px, backgroundY: -43.9px),
vimeo: (width: 33.9px, height: 33.9px, backgroundX: -87.8px, backgroundY: 0px),
);
[class^="icon-svg-"] {
$sprite: map-get($icons-svg, sprite);
background-image: url(map-get($sprite, svgPath));
}
@each $key, $atts in $icons-svg {
@if( $key != 'sprite' ) {
@each $attr in $key {
.icon-svg-#{$attr} {
width: map-get($atts, width);
height: map-get($atts, height);
background-position: map-get($atts, backgroundX) map-get($atts, backgroundY);
}
}
}
}
[class^="icon-svg-"] {
background-image: url("../images/sprite.svg");
}
.icon-svg-facebook {
width: 33.9px;
height: 33.9px;
background-position: 0px 0px;
}
.icon-svg-linkedin {
width: 33.9px;
height: 33.9px;
background-position: -43.9px 0px;
}
.icon-svg-pinterest {
width: 33.9px;
height: 33.9px;
background-position: 0px -43.9px;
}
.icon-svg-twitter {
width: 33.9px;
height: 33.9px;
background-position: -43.9px -43.9px;
}
.icon-svg-vimeo {
width: 33.9px;
height: 33.9px;
background-position: -87.8px 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment