Skip to content

Instantly share code, notes, and snippets.

@t32k
Last active December 27, 2015 16:09
Show Gist options
  • Save t32k/e65534b5a8bb124e1cbe to your computer and use it in GitHub Desktop.
Save t32k/e65534b5a8bb124e1cbe to your computer and use it in GitHub Desktop.
CSS Sprite for Retina Display Maple.css
// - @mixin CSS Sprite for Retina Display
// - @param $isParent {String} the first parameter is a string(parent or child)
// - @param $map {Glob} the second parameter is a glob
// - @param $map-item {Glob} the second parameter is a glob
// - @param $isSameChild {Boolean} default is false
// - @usage @include sprite(child, $map-tabs, home)
@mixin sprite($isParent, $map, $map-item: foo, $isSameChild: false) {
@if not $isSameChild {
@if $isParent == "parent" {
background-image: sprite-url($map);
background-repeat: no-repeat;
background-size: round(image-width(sprite-path($map)) / 2) round(image-height(sprite-path($map)) / 2);
} @else {
$position-x: round(nth(sprite-position($map, $map-item), 1) / 2);
width: round(image-width(sprite-file($map, $map-item)) / 2);
height: round(image-height(sprite-file($map, $map-item)) / 2);
background-position: $position-x 0;
}
} @else {
@if $isParent == "parent" {
width: round(image-width(sprite-file($map, $map-item)) / 2);
height: round(image-height(sprite-file($map, $map-item)) / 2);
background-image: sprite-url($map);
background-repeat: no-repeat;
background-size: round(image-width(sprite-path($map)) / 2) round(image-height(sprite-path($map)) / 2);
} @else {
$position-x: round(nth(sprite-position($map, $map-item), 1) / 2);
background-position: $position-x 0;
}
}
}
$map-tabs: sprite-map("/files/img/sprite/tabs/*.png", $layout: horizontal);
.sprt-a { @include sprite(parent, $map-tabs); }
.sprt-a-bird1 { @include sprite(child, $map-tabs, bird1); }
.sprt-a-bird2 { @include sprite(child, $map-tabs, bird2); }
.sprt-a-bird3 { @include sprite(child, $map-tabs, bird3); }
.sprt-a-bird4 { @include sprite(child, $map-tabs, bird4); }
//.sprt-a { @include sprite(parent, $map-tabs, bird1, true); }
//.sprt-a-bird1 { @include sprite(child, $map-tabs, bird1, true); }
.sprt-a {
background-image: url(/files/img/sprite/tabs-s3217a038c5.png);
background-repeat: no-repeat;
background-size: 120px 25px;
}
.sprt-a-bird1 {
width: 30px;
height: 25px;
background-position: 0 0;
}
.sprt-a-bird2 {
width: 30px;
height: 25px;
background-position: -30px 0;
}
.sprt-a-bird3 {
width: 30px;
height: 25px;
background-position: -60px 0;
}
.sprt-a-bird4 {
width: 30px;
height: 25px;
background-position: -90px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment