Geek asks and answers

Compass Match Status

I use a compass and I have sprites that work just fine. The page loads and my images appear using a compass sprite. My question is, how do I now freeze them? I am new to the compass, so I don’t understand how this should work, and the compass documentation does not help me.

+5
source share
3 answers

Well, what the compass does is actually take all of your individual images, turn them into one sprite and give you the css background positions for each icon, so you paste them into the stylesheet.

If you want to hover over your buttons, you first need to create hover icons. They must be included in the first sprite (or may be in another if you then call the correct file). Compass will then provide you with a position for these freeze icons, and all you have to do is copy these positions and paste them into the CSS stylesheet for your freeze state. For instance:

// 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;
}
+1
source

Adding folders to your sprites is very simple, just put "_hover" (or "_active" or "_target") in the image file name and let the compass create a sprite map for you = D.

+21
source

, ...

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

, 2 ... cats.png cats-hover.png , ( )

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

To add a hang ...

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

I am pretty sure that there is a way to automatically generate a hang state, but I don't have much time to figure this out.

+1
source

More articles:


All Articles