-
-
Save nathos/959764 to your computer and use it in GitHub Desktop.
@mixin fancy-hover($sprite_dir, $off_state, $hover_state, $speed: 0.3s) | |
$sprites: sprite-map("#{$sprite_dir}/*.png") | |
$width: image-width(sprite_file($sprites, $off_state)) | |
$height: image-height(sprite_file($sprites, $off_state)) | |
@include hide-text | |
width: $width | |
height: $height | |
background: sprite($sprites, $off_state) no-repeat | |
display: block | |
position: relative | |
span | |
width: $width | |
height: $height | |
background: sprite($sprites, $hover_state) no-repeat | |
display: block | |
position: absolute | |
top: 0 | |
left: 0 | |
opacity: 0 | |
@include transition(opacity $speed ease-in-out) | |
.no-opacity & | |
visibility: hidden | |
&:hover span | |
opacity: 1 | |
.no-opacity & | |
visibility: visible |
<div class="fancy-hover-links"> | |
<ul> | |
<li id='twitter'> | |
<span></span> | |
<!-- don't forget this empty span! --> | |
</li> | |
<li id='facebook'> | |
<span></span> | |
</li> | |
<li id='forrst'> | |
Forrst | |
<span></span> | |
</li> | |
<li id='rss'> | |
RSS | |
<span></span> | |
</li> | |
</ul> | |
</div> |
// in this example, the "my_sprites" directory contains 8 pngs, 2 for each image | |
// pass the sprite directory, the off state name, and the hover state name | |
// you can optionally pass a fourth argument for the duration of the fade | |
@include fancy-hover(my_sprites, twitter_off, twitter_on) | |
// repeat for each pair of sprites you want to make fancy! | |
@include fancy-hover(my_sprites, facebook_off, facebook_on) | |
#forrst | |
@include fancy-hover(my_sprites, forrst_off, forrst_on) | |
#rss | |
@include fancy-hover(my_sprites, rss_off, rss_on) |
I figured it out. I guess there are two ways of generating sprites. The method I mentioned above (e.g. @import "icon/.png";) and the way you are doing it in your mixing (e.g. $icon: sprite-map("icon/.png");). I'm not really sure what the differences are, but the config variables are different for the two methods.
This is really great, i am trying to implement this, but i cannot manage to do it.
I am relatively new to compass and sublime text 2 so I am experimenting with your function.
How do i include the mixin? Where do i put the file hover-demo.sass? Codekit gives errors on compiling.
Thnx.
@Elloro: the mixin is included by the line @include fancy-hover(my_sprites, twitter_off, twitter_on)
(in this case, for the twitter icon).
Remember, my_sprites
is the name of a directory with the sprite images (PNG files) inside it. This directory should be inside your images directory (as configured w/ Compass).
The contents of hover-demo.sass
would just go inside your main stylesheet. Also remember that with Sass, you need to declare your mixins before including them, so make sure that the contents of fancy-hover-mixin.sass
are before the @include
statement.
I was using SCSS so i needed to convert your sass file. Everything worked except the fading. This is what i have:
@import "compass/reset";
@import "compass/css3";
@import "compass/css3/pie";
@import "compass/typography/links/link-colors";
@import "compass/typography/links/hover-link";
@import "compass/typography/lists";
@import "compass/css3/transition";
@import "compass/utilities/general/clearfix";
@import "compass/typography/text/replacement";
@import "compass/css3/opacity";
@mixin fancy-hover($sprite_dir, $off_state, $hover_state, $speed: 1s) {
$sprites: sprite-map("#{$sprite_dir}/*.png");
$width: image-width(sprite_file($sprites, $off_state));
$height: image-height(sprite_file($sprites, $off_state));
@include hide-text;
width: $width;
height: $height;
background: sprite($sprites, $off_state) no-repeat;
display: block;
position: relative;
span {
width: $width;
height: $height;
background: sprite($sprites, $hover_state) no-repeat;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
@include transition(opacity, $speed, ease-in-out);
.no-opacity & {
visibility: hidden;
}
}
&:hover span {
opacity: 1;
.no-opacity & {
visibility: visible;
}
}
}
#twitter {@include fancy-hover(my_sprites, twitter_off, twitter_on, 2);}
@Elloro: my apologies, there was a change in Compass a while back that changes the syntax of the transition
mixin to take multiple transitions at once. This means you can either use the single-transition
mixin instead, or change the list passed to transition
to be space-separated.
I've updated the Gist with the latter, like so:
@include transition(opacity $speed ease-in-out)
YES did the trick! Thnx!
So, I just realized that using this mixin means that I don't need to generate the sprites with compass. e.g.:
@import "sub-nav/*.png";
@include all-sub-nav-sprites;
However, how would I use any of the config variables with this mixing? I'm trying to accomplish this:
$sub-nav-spacing: 20px;
@import "sub-nav/*.png";
@include all-sub-nav-sprites;
Thanks.