9

我在我的 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没有任何变化时。我希望在那里看到颜色的变化。

谁能告诉我我在这里想念什么？

谢谢你的帮助。

4

2 回答 2

8

SASS 代码很好。

background-image位于 的“顶部” background-color，因此您看不到变化。

进行此调整，这将声明所有背景属性：

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

您可能可以删除!important.

如果你想有不同的渐变，你必须在样式中再次声明每个属性（使用不同的值） 。:hover

于 2013-10-14T18:37:54.700 回答
4

我建议使用透明渐变，并且只更改背景颜色。此外，您正在重新定义$from和$to变量，而不是接受$color参数。

@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;
  }
}
于 2013-10-14T20:30:00.440 回答