在Sass/Compass中自动变暗颜色

Question

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

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

这是用途: darken($color, $amount)

我的问题是:如何让这个"自动"将我的所有<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%);
}