Instantly share code, notes, and snippets.

Embed
What would you like to do?
Template for Spriteful : Retina + Image Dimensions
// ============================================================================
// This Stylesheet was generated by the 'spriteful' gem, with the following options:
<%- if Spriteful.options -%>
// 'spriteful <%= Spriteful.options.join(' ') %>'.
<%- end -%>
<%- if mixin? -%>
// Below there are several [Mixin Directives]
// (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins)
<%- else -%>
// Below there are several [Placeholder Selectors]
// (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_)
<%- end -%>
// to use the '<%= sprite.name %>' sprite on your SCSS code, as in:
//
// .my-thing {
// <%= extension_strategy %><%= class_name_for(sprite) %>-sprite-<%= class_name_for(sprite.images.first) %>;
// // Your styles here.
// }
<%= extension_prefix %><%= class_name_for(sprite) %>-sprite {
<%- if rails? -%>
background-image: image-url('<%= image_url(sprite) %>');
<%- else -%>
background-image: url(<%= image_url(sprite) %>);
<%- end -%>
background-repeat: no-repeat;
}
<% sprite.each_image do |image| %>
<%= extension_prefix %><%= class_name_for(sprite) %>-sprite-<%= class_name_for(image) %> {
<%= extension_strategy %><%= class_name_for(sprite) %>-sprite;
<%- unless class_name_for(sprite).include? "2x" -%>
background-position: <%= image.left %>px <%= image.top %>px;
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
@include <%= class_name_for(sprite) %>2x-sprite-<%= class_name_for(image) %>;
}
<%- else -%>
background-position: <%= image.left.to_i/2 %>px <%= image.top.to_i/2 %>px;
background-size: image-width('<%= image_url(sprite) %>')/2 image-height('<%= image_url(sprite) %>')/2;
<%- end -%>
<%- if image.svg? %>
.svg & {
background-image: url(<%= data_uri(image) %>);
background-position: 0 0;
}
<%- end -%>
}
<%= extension_prefix %><%= class_name_for(sprite) %>-sprite-<%= class_name_for(image) %>-dim {
<%= extension_strategy %><%= class_name_for(sprite) %>-sprite-<%= class_name_for(image) %>;
width: <%= image.width %>px;
height: <%= image.height %>px;
}
<% end %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment