Fading CSS sprites using Compass/SCSS

[skweeze]

I am using the built in sprite making capability of Compass to make a sprite sheet of icons. Compass creates a load of class names so that the hover state works automatically without the need to write any CSS/SCSS. Does anyone know if it is possible create a faded hover state using generated classes in Compass.

[skweeze]

This doesn’t work. I’m not sure it is possible with the way Compass generates the CSS. This is what it compiles:

.icons-social-sketch-twitter {
background-position: 0 -925px;
}
.icons-social-sketch-twitter:hover,
.icons-social-sketch-twitter.social-sketch-twitter_hover,
.icons-social-sketch-twitter.social-sketch-twitter-hover {
background-position: 0 -1015px;
}

Which means the will always have a static hover state.

Having read up, to create a faded hover state using sprites I would need to mark up my button like so:

Some Text

Then add the following SCSS/CSS.

a {
position:relative;
display:block;

&:hover span {
@include opacity(1);
}
}
span {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
@include transition-property(opacity);
@include transition-duration(.5s);
@include opacity(0);
}

This lets us fade out the sprite but to get it to work properly we would need to remove the :hover state in the CSS that Compass spits out which is not possible.

[skweeze]

Here is the link from the Compass website explaining about magic selectors: http://compass-style.org/help/tutorials/spriting/magic-selectors/
I am using the latest version of Compass (v 0.12.2)
The code I am using is:

$icons-spacing:20px;
@import “icons/*.png”;
@include all-icons-sprites;

Basically, adding an image with “_hover” at the end automatically adds the :hover state to the selector.

[skweeze]

Pretty much yeah. Fade in on hover, fade out on roll out. I was trying to use this tutorial to get to what i wanted. https://css-tricks.com/fade-image-within-sprite/. Removing the hover class from the span will do nothing as it will mean the span has no hover state image to fade into. Whatever happens because Compass is generating this:

.icons-social-sketch-twitter {
background-position: 0 -925px;
}
.icons-social-sketch-twitter:hover,
.icons-social-sketch-twitter.social-sketch-twitter_hover,
.icons-social-sketch-twitter.social-sketch-twitter-hover {
background-position: 0 -1015px;
}

The .icons-social-sketch-twitter:hover will always be applied to the main a tag element on rollover without a transition. I’m not sure there is a way round it. It’d be great if there was but I cannot for the life of me see it.

[Author]

Posts