为什么我的SASS梯度混合的悬停状态不起作用？

Question

我在我的Rails应用程序中使用了以下gradientmixin anchors:

@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不工作,虽然.当我悬停在一个anchor没有任何变化.我希望看到那里的颜色发生变化.

谁能告诉我这里缺少什么？

谢谢你的帮助.

Answer 1

SASS代码很好.

background-image坐在"顶部" background-color,所以你没有看到变化.

进行此调整,将声明所有背景属性:

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

你可以删除!important.

如果要使用不同的渐变,则必须在样式中再次声明每个属性(具有不同的值):hover.