Why is the hover state of my SASS gradient mixin not working?

Question

I am using the following gradient mixin on some of the anchors in my 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);
  }
}

The :hover does not work though. When I hover over an anchor nothing changes. I would expect to see a change in color there.

Can anybody tell me what I am missing here?

Thanks for any help.

Answer 1

The SASS code is fine.

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

Make this tweak, which will declare all background properties:

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

You can probably remove !important.

If you want to have a different gradient, you have 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. Also, you're redefining your $from and $to variables instead of accepting a $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;
  }
}