Question

I would like to use SASS & Compass to generate some specific sprites.

This is the code I have, without Compass/Sprite:

.ico-account-contact-informations { 
    width:60px; height:40px; background:url(/images/ico-account/contact-informations.png);
    a[href]:hover &, .fn-active & {background:url(/images/ico-account/contact-informations_active.png);} 
} 
.ico-account-credit-cards { 
    width:60px; height:40px; background:url(/images/ico-account/credit-cards.png); 
    a[href]:hover &, .fn-active & {background:url(/images/ico-account/credit-cards-active_active.png);} 
} 

I need the same structure with a sprite image.
I read the “magical part” of the sprite tutorial, but I can’t find the correct syntax to do what I need.

---

For exemple I tried that:

$ico-account-sprite-dimensions: true;    
@include all-ico-account-sprites();
a {@include all-ico-account-sprites();}

But with that, the state :hover is on the “img” but not on the “a”.

---

I also tried that:

$ico-account-sprite-dimensions: true;    
@import "ico-account/*_hover.png";
a[href]:hover {@include all-ico-account-sprites(true);}
@import "ico-account/*.png";
@include all-ico-account-sprites(true);

Now it generate multiple variants of css class name, but not the case for:

a[href]:hover .ico-account-credit-cards {...}

And there is 2 sprites instead of 1.

---

Not so easy for me… thanks for your help.

Answer 1

I finally found a solution.
It can be done on a case by case basis for all images where we need to support an active (or :hover) state:

/* Mixin */
@mixin link-bg-sprite($map, $img, $img-active: $img + '_active') {
    .#{sprite-map-name($map)}-#{$img} {
        background: sprite($map, $img) no-repeat;
        width: image-width(unquote("/" + sprite-map-name($map) + "/" + $img + ".png"));
        height: image-height(unquote("/" + sprite-map-name($map) + "/" + $img + ".png"));
        a[href]:hover &, .fn-state-active & {
            background: sprite($map, $img-active) no-repeat;
        }
    }
}

/* Account Icons */
$map: sprite-map("ico-account/*.png");
@include link-bg-sprite($map, contact-informations);
@include link-bg-sprite($map, credit-cards);