Automatic darken color in Sass / Compass

22
votes

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 ?

2
csssasscompass-sass
possible duplicate of SASS - Manipulate inherited color? – cimmanon
You can't have a solution for something that is impossible. – cimmanon
This is not possible in SASS/SCSS. However, you could consider using the "darker" color as the link color to begin with, and set it to 80% opacity and then 100% opacity in the hover state. Similar effect, less repetition. The mixin you wrote hardly saves time. – Ennui
Wouldn't background: darken($blue, 80%) work? – Katie Kilian
A dirty hack™ would be make the element sit on a black background, and change the opacity on hover – Mike Causer

2 Answers

38
votes

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 :)

13
votes

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

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