Skip to content

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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.