Menu
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.
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:
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.
467
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):
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
