lib/templates/scss.mustache
{{#items}}
${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};
{{/items}}
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 4);
}
@function sprite-width($sprite) {
@return nth($sprite, 3);
}
@function sprite-height($sprite) {
@return nth($sprite, 4);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite($sprite) {
@include sprite-position($sprite);
background-repeat: no-repeat;
overflow: hidden;
display: block;
@include sprite-width($sprite);
@include sprite-height($sprite);
}
{{#sprite}}
{{class}} {
background-image: url('{{{escaped_image}}}');
}
{{/sprite}}
{{#retina}}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
{{class}} {
background-image: url('{{{escaped_image}}}');
background-size: {{px.total_width}} {{px.total_height}};
}
}
{{/retina}}