Created
November 28, 2012 08:49
-
-
Save t32k/4159967 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Usage: @include sprites($map-tabs, common, true); | |
@mixin sprites($map, $map-item, $isCommon:false) { | |
@if $isCommon { | |
background-image: sprite-url($map); | |
background-size: round(image-width(sprite-path($map)) / 2) round(image-height(sprite-path($map)) / 2); | |
background-repeat: no-repeat; | |
} @else { | |
$pos-y: round(nth(sprite-position($map, $map-item), 2) / 2); | |
width: round(image-width(sprite-file($map, $map-item)) / 2); | |
height: round(image-height(sprite-file($map, $map-item)) / 2); | |
background-position: 0 $pos-y; | |
} | |
} | |
$ws: 4px; | |
// Each tab icon size: 30px 34px; Each header icon size: 33px 33px; | |
$map-tabs: sprite-map("/files/img/sprites/tabs/*.png"); | |
$map-arrows: sprite-map("/files/img/sprites/arrows/*.png", $spacing: $ws); | |
$map-actions: sprite-map("/files/img/sprites/actions/*.png", $spacing: $ws); | |
$map-listitems: sprite-map("/files/img/sprites/listitems/*.png", $spacing: $ws); | |
$map-categories: sprite-map("/files/img/sprites/categories/*.png"); | |
// ======================================================== | |
// @extend Background Image Control | |
// ======================================================== | |
%tabs { @include sprites($map-tabs, common, true); } | |
%categories { @include sprites($map-categories, common, true); } | |
%listitems{ @include sprites($map-listitems, common, true); } | |
%arrows { @include sprites($map-arrows, common, true); } | |
%_ico-arrow { | |
background-image: url(/files/img/arrow_v2.png); | |
background-size: 20px 430px; | |
background-repeat: no-repeat; | |
} | |
%actions{ @include sprites($map-actions, common, true); } | |
// You MUST change small button prop(_list.scss) and for IE prop (_pc_share.scss) when change this prop. | |
%_ico-action { | |
background-image: url(/files/img/ico_action_v3.png); | |
background-size: 16px 180px; | |
background-repeat: no-repeat; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment