Sprites de brújula, estado de vuelo estacionario

Question

Estoy usando una brújula y tengo mis sprites de brújula que funcionan bien. La página se carga y mis imágenes aparecen usando el sprite generado por la brújula. Mi pregunta es ¿cómo puedo configurar ahora el flotar sobre estos? Soy nuevo en la brújula, así que no entiendo cómo se supone que funciona, y la documentación de la brújula no me está ayudando.

Answer 1

Bueno, lo que la brújula hace es tomar todas las imágenes separadas, convertirlas en un sprite y darle las posiciones de fondo CSS para cada icono para que pegue eso en su hoja de estilo.

Si desea estados de vuelo estacionario para sus botones, primero debe crear los iconos de desplazamiento. Deben incluirse en el primer sprite (o pueden estar en otro diferente, siempre y cuando llame al archivo correcto). Compass le dará la posición para estos iconos de "estado de desplazamiento", y todo lo que tiene que hacer es copiar esas posiciones y pegarlas en su hoja de estilo css para su estado de vuelo estacionario. Por ejemplo:

// your normal icon: 
.icon { 
     background-image: url(yourimage.png); 
     background-position:-100px -100px; 
} 

// your hover icon - position for hover state image: 
.icon:hover { 
     background-image: url(yourimage.png); 
     background-position:-200px -100px; 
} 

Answer 2

Adición cierne a sus sprites es muy fácil, sólo hay que poner "_hover" (o "_active", o "_target") en el nombre del archivo de imagen y vamos brújula generar el mapa de sprites para ti = D .

Answer 3

Usted debe crear su hoja de sprites de forma manual como este ...

$sprite-map: sprite-map("your_sprite_folder_here/*.png") 

i 
    background: $sprite-map 
    display: inline-block 


@each $icon in sprite_names($sprite-map) 
    .icn-#{$icon} 
     background-position: sprite-position($sprite-map, $icon) 
      +sprite-dimensions($sprite-map, $icon) 

A continuación, supongamos que tiene 2 sprites en esa carpeta ... cats.png y gatos-hover.png Para usarlos que sería utilizar un elemento i (se puede hacer de esto una clase o como se quiera)

<i class=".icn-cats"></i> 

Para añadir el vuelo estacionario ...

.icn-cats 
    &:hover 
     background-position: sprite-position($sprite-map, cats-hover) 

Estoy casi seguro de que hay una forma de generar automáticamente el estado de vuelo estacionario, pero realmente no he invertido mucho tiempo en descifrarlo.