6

Update - 20140614:

After not getting any answers to this question, or on github, I decided to come up with my own solution to the problem. I was using Compass for a number of things, but its main utility was in its ability to generated image sprites.
Most other things could be accomplished using pure SCSS.

Thus, I wrote broccoli-sprite. This, used in conjunction with ember-cli's built in support for SCSS using broccoli-sass, was able to meet my needs.

NPM

You can read more about the process here.

Original question:

With Sass, but without Compass, is it possible to create CSS sprites?

I am looking for a way to accomplish the equivalent output as this Sass + Compass would accomplish:

@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";

Essentially this would comprise of two things:

  1. Joining several images together
  2. Generating the CSS classes such that background-image would point to the joined image, and the coordinates and dimensions for it to show just the right section of the joined image.

The latter, generating the CSS classes should be do-able using Sass, however, is the former, joining several images, possible? If so, how can this be done?

NOTE: Am not sure if anyone has done this before, mainly because googling "image sprites with sass without compass" and "image sprites with sass -compass" simply did not return any relevant results.

Volker E.
  • 5,911
  • 11
  • 47
  • 64
bguiz
  • 27,371
  • 47
  • 154
  • 243

1 Answers1

4

Sass itself will not help you with sprites generation.

You'll have to use a task runner to achieve that. As you're not willing to use Compass, i assume you're in a Node environment.

The most popular (but not the best there is) task runner is Grunt.

Grunt has a number of recipes for sprite generation. I managed to google up some for you (in no particular order):

Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133