在Sass / Compass中自动变暗颜色

Question

我为网站设置了一个CSS，其中:hover状态的所有链接都比正常状态更暗。

我使用Sass / Compass，所以我查看了darken Sass方法，http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method

以下是使用：darken($color, $amount)

我的问题是：我怎样才能做到这一点＆＃34;自动＆＃34;将所有<a>元素设置为80％更暗？

我想做的是（Sass语法）：

a
   background: $blue
   &:hover
      background: darken(this element background-color, 80%)

这样做的最佳解决方案是什么？

Answer 1

我想到了这一点。

我发现的唯一方法是创建一个mixin：

@mixin setBgColorAndHover($baseColor)
    background-color: $baseColor
    &:hover
          background-color: darken($baseColor, 5%)

然后：

.button
    +setBgColorAndHover($green) // as $green is a color variable I use.

不是最好的，但是可以完成这项工作：）

Answer 2

现在，最好在本机CSS中使用过滤器：

.button:hover {
  filter: brightness(85%);
}