Why doesn't the hover state of my SASS mix work?

Question

I use the following gradient mixin for some of the anchors in a Rails application:

 @mixin gradient($color) { $from: lighten($color, 5%); $to: darken($color, 5%); background-color: $color; background-image: -moz-linear-gradient($from, $to); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); background-image: -webkit-linear-gradient($from, $to); background-image: -o-linear-gradient($from, $to); &:hover { $hover_color: darken($color, 5%); $from: lighten($hover_color, 5%); $to: darken($hover_color, 5%); background-color: $hover_color; background-image: -moz-linear-gradient($from, $to); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); background-image: -webkit-linear-gradient($from, $to); background-image: -o-linear-gradient($from, $to); } } 

:hover does not work. When I hang over the anchor , nothing changes. I expect to see a color change there.

Can someone tell me what I am missing here?

Thanks for any help.

Answer 1

SASS code is OK.

background-image sits "on top" of background-color , so you don't see the change.

Make this setting that will declare all background properties:

 &:hover { background: darken($color, 20%) !important; } 

You can remove !important .

If you want to have a different gradient, you need to declare each property again (with different values) in the :hover styles.

Answer 2

I would recommend using a transparent gradient and just changing the background color. In addition, you override the $from and $to variables instead of accepting the $color parameter.

 @mixin gradient($color) { $from: transparent; $to: darken($color, 5%); background-color: lighten($color, 5%); background-image: -moz-linear-gradient($from, $to); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); background-image: -webkit-linear-gradient($from, $to); background-image: -o-linear-gradient($from, $to); &:hover { background-color: red; } }