[class^="<%= selector %>-"], [class*=" <%= selector %>-"] {
  background-repeat: no-repeat;
  background-size: 100%;
}

i[class^="<%= selector %>-"], i[class*=" <%= selector %>-"] {
  font-size: 0;
  display: inline-block;
}

<% images.forEach(function(img) { %>.<%= selector %>-<%= img.id %> {
  <% if (img.width && img.height) { %>width: <%= img.width %>px; height: <%= img.height %>px;<% } %>
  background-image: url(<%= img.href %>);
}
<% }) %>

<% sizes.forEach(function(size) { %>
@media only screen and (-webkit-min-device-pixel-ratio: <%= size.ratio %>),
only screen and (min--moz-device-pixel-ratio: <%= size.ratio %>),
only screen and (-o-min-device-pixel-ratio: <%= size.ratio %>/1),
only screen and (min-device-pixel-ratio: <%= size.ratio %>),
only screen and (min-resolution: <%= (96 * size.ratio) %>dpi),
only screen and (min-resolution: <%= (size.ratio - .75) %>dppx) {
  <% size.images.forEach(function(img) { %>.<%= selector %>-<%= img.id %> {
    background-image: url(<%= img.href %>);
  }
  <% }) %>
}
<% }) %>