Skip to content

Instantly share code, notes, and snippets.

@mikestreety
Created March 3, 2015 10:48
Show Gist options
  • Save mikestreety/d0f7c4a14b965d6fcb17 to your computer and use it in GitHub Desktop.
Save mikestreety/d0f7c4a14b965d6fcb17 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$ieSprite: '.lt-ie9' !default;
$baseFontSize: 16px !default;
// Converts px to em
@function mq-px2em($px, $base-font-size: $baseFontSize) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return mq-px2em($px + 0px); // That may fail.
} @else if (unit($px) == em) {
@return $px;
}
@return ($px / $base-font-size) * 1em;
}
// Gets an attribute from the sass map
// Added: spriteMap option
@function sprite-attr($spriteMap, $icon, $attr) {
$icon: map-get($spriteMap, $icon);
@return map-get($icon, $attr);
}
// Added: spriteMap option
@function icon-attr($spriteMap, $icon) {
$attr: (
width: sprite-attr($spriteMap, $icon, width),
height: sprite-attr($spriteMap, $icon, height),
x: sprite-attr($spriteMap, $icon, backgroundX),
y: sprite-attr($spriteMap, $icon, backgroundY)
);
@return $attr;
}
// IE Sprite Mixin for when rotation is used
// Added: spriteMap option
// Removed: extend
@mixin ie-sprite($spriteMap, $icon, $type: all) {
$sprite: map-get($spriteMap, sprite);
$iconMap: icon-attr($spriteMap, $icon);
@if $ieSprite {
#{$ieSprite} & {
@if $type == all {
// Shares the PNG background
background-image: url(map-get($sprite, pngPath));
}
// Outputs dimensions of icon
@if $type == all or $type == size {
width: map-get($iconMap, width);
height: map-get($iconMap, height);
}
// Outputs background position
@if $type == all or $type == bg {
background-position: (map-get($iconMap, x)) (map-get($iconMap, y));
}
}
}
}
// For use with the gulp sprite plugin
// Added: spriteMap option
// Removed: extend
@mixin sprite($spriteMap, $icon, $type: all) {
$sprite: map-get($spriteMap, sprite);
@if $type == all {
// Shares the backgrounds
display: inline-block;
background-image: url(map-get($sprite, svgPath));
background-size: mq-px2em(map-get($sprite, width)) mq-px2em(map-get($sprite, height));
}
$iconMap: icon-attr($spriteMap, $icon);
// Outputs dimensions in em
@if $type == all or $type == size {
width: mq-px2em(map-get($iconMap, width) + 1);
height: mq-px2em(map-get($iconMap, height) + 1);
}
// Outputs background position in em
@if $type == all or $type == bg {
background-position: mq-px2em(map-get($iconMap, x)) mq-px2em(map-get($iconMap, y));
}
// Add ie fallback
@include ie-sprite($spriteMap, $icon, $type);
}
// Example
$iconsOne: (
sprite: (width: 104px, height: 96px, pngPath: '../img/sprite.png', svgPath: '../img/sprite.svg'),
facebook: (width: 10px, height: 22px, backgroundX: 0px, backgroundY: 0px),
twitter: (width: 32px, height: 22px, backgroundX: -20px, backgroundY: -32px),
twitterHover: (width: 32px, height: 22px, backgroundX: -62px, backgroundY: -64px),
);
$iconsTwo: (
sprite: (width: 104px, height: 96px, pngPath: '../img/sprite.png', svgPath: '../img/sprite.svg'),
facebookTwo: (width: 10px, height: 22px, backgroundX: 0px, backgroundY: 0px),
twitterTwo: (width: 32px, height: 22px, backgroundX: -20px, backgroundY: -32px),
twitterHoverTwo: (width: 32px, height: 22px, backgroundX: -62px, backgroundY: -64px),
);
.class {
@include sprite($iconsOne, facebook);
}
.classTwo {
@include sprite($iconsTwo, twitterTwo, bg);
}
.class {
display: inline-block;
background-image: url("../img/sprite.svg");
background-size: 6.5em 6em;
width: 0.6875em;
height: 1.4375em;
background-position: 0em 0em;
}
.lt-ie9 .class {
background-image: url("../img/sprite.png");
width: 10px;
height: 22px;
background-position: 0px 0px;
}
.classTwo {
background-position: -1.25em -2em;
}
.lt-ie9 .classTwo {
background-position: -20px -32px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment