Automatic darken color in Sass / Compass

Question

I'm setting up a CSS for a website where all the links, in :hover state, are darker than in normal state.

I'm using Sass/Compass so I looked to the darken Sass method, here : http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method

Here's the use : darken($color, $amount)

My question is : how can I make this "automatic" to set all my <a> elements to be 80% darker ?

What I'm trying to do is (Sass syntax) :

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

What's the best solution to do this ?

Answer 1

I thought about this.

The only way I found is by creating a mixin :

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

And then :

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

Not the best, but that will do the job :)

Answer 2

By now, better to use a filter in native CSS:

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