1

I am using omega 4 theme. To generate css sprites I have used following in my layout sass file

@import "social-icons/*.png";
@include all-social-icons-sprites;

It generated this file social-icons-s8394565a36.png in generated folder in my images folder, but I cant find the css for my icons.

Is it suppose to generate the CSS also if so where can I find that ?? I have checked almost all directories in my SASS\LAYOUT\MY-LAYOUT directory but it seems that no css is generated for sprites

2

Don't be confused by the fact that you're using Omega 4, which doesn't have much to do with the spriting aside from the fact that it allows you to use Compass to compile its styles.

You can find great write-ups on Compass spriting here and here.

Once you've created the spritesheet with:

@import "social-icons/*.png";

You can use the sprites like this, where you have a file at "social-icons/facebook.png":

.facebook-icon {
  @include social-icons-sprite(facebook);
}

Alternatively (my preference), you can use spritesheets like this:

$social: sprite-map("social-icons/*.png");

.facebook-icon {
  background: sprite($social, facebook);
}

And you can get even more hands-on:

.facebook-icon {
  background-image: sprite-url($social);
  // Offset the facebook sprite x-position by 2px and y-position by -6px.
  background-position: sprite-position($social, facebook, 2px, -6px);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.