Brújula: sintaxis para generar imágenes de sprites, con un estado específico en el elemento principal (: hover, .class)

Me gustaría usar SASS & Compass para generar algunos sprites específicos.

Este es el código que tengo, sin 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);} 
} 

Necesito la misma estructura con una imagen de sprite. Yo leo el "parte mágica"del tutorial de sprites, pero no puedo encontrar la sintaxis correcta para hacer lo que necesito.


Por ejemplo, probé eso:

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

Pero con eso, el estado: hover está en la "img" pero no en la "a".


También probé eso:

$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);

Ahora genera múltiples variantes del nombre de la clase css, pero no es el caso de:

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

Y hay 2 sprites en lugar de 1.


No es tan fácil para mí ... gracias por tu ayuda.

preguntado el 27 de agosto de 11 a las 14:08

2 Respuestas

Finalmente encontré una solución. Se puede hacer caso por caso para todas las imágenes en las que necesitamos admitir un estado activo (o: hover):

/* 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);

respondido 18 nov., 11:06

Hay mucha magia en la brújula y sus sprites.

No tiene que agregar ningún mixins o código, para agregar estados para Sprites en Compass. Puedes agregar estados a tus sprites nombrándolos de la manera correcta:

icons/myfirstsprite.png         <- the path to a sprite
icons/myfirstsprite_hover.png   <- this image will automatically generate 
                                   a css hover state for "myfirstsprite.png"

Respondido el 20 de enero de 15 a las 17:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.