mixin
%base-properties-img-replacement-sprite{
overflow: hidden;
padding: 0;
border: none;
font: 0/0 a;
text-shadow: none;
text-decoration: none;
color: transparent;
}
@mixin img-replacement-sprite($map: false, $bg-url: false, $name: false, $display: inline-block, $margin: false, $valign: false) {
@extend %base-properties-img-replacement-sprite;
@if $display == inline-block {
@include inline-block;
} @else if $display == block {
display: block;
} @else {
@include inline-block;
}
@if $margin {
margin: unquote($margin);
}
@if $bg-url {
background-image: $bg-url;
background-repeat: no-repeat;
} @else {
background-repeat: no-repeat;
}
@if $map and $name {
background-position: sprite-position($map, $name);
width: image-width( sprite-file($map, $name) );
height: image-height( sprite-file($map, $name) );
}
@if $valign {
vertical-align: $valign;
}
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*text-indent: 0;
*line-height: 9999px;
*text-align: left;
*word-wrap: normal;
}
}
使うとき
@import "spr/icons/*.png";
$spr-icons: sprite-map("spr/icons/*.png");
$spr-url-icons: sprite-url($spr-icons);
i.new{
@include img-replacement-sprite( $spr-icons, $spr-url-icons, new, false, false, middle );
}
とりあえずこれで困ってないけど、もっといい書き方あったら知りたい><