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.

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 ?

possible duplicate of [SASS - Manipulate inherited color?](http://stackoverflow.com/questions/14920801/sass-manipulate-inherited-color) — cimmanon, Jan 08 '14 at 18:23
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, Jan 08 '14 at 19:26
A dirty hack™ would be make the element sit on a black background, and change the opacity on hover — Mike Causer, Mar 19 '15 at 05:39

score 43 · Accepted Answer · answered Jan 08 '14 at 18:44

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

score 22 · Answer 2 · answered Jul 14 '19 at 20:30

22

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

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

answered Jul 14 '19 at 20:30

Merovex

It surely is a good thing to do it in plain CSS, but it doesn't answer the actual issue (set the background color and its hover background color, darkened or brightened). – enguerranws Jul 16 '19 at 14:31
Well, since you and I are the only two involved in this answer, your question was "how can I make this "automatic" to set all my elements to be 80% darker ?" https://jsfiddle.net/9emvaw10/1/ You didn't cite it had to be Sass. And, the background color is changed. If you want all links to be changed, then there's not a need for a mixin. – Merovex Jul 17 '19 at 22:47
It wasn't clear I want to do it with Sass, and a pure CSS way to achieve that had to appear in this thread (which is 5 years old btw). However, today, for compatibility sake, I'll stick to a Sass method – enguerranws Jul 23 '19 at 14:55
Coming back to this. You're sticking with a kludge because CSS is incompatible with SASS? It seems to me adding a little CSS is cleaner for maintainability. But, TIMTOWTDI – Merovex Apr 28 '21 at 08:49
1

I think what I meant is that CSS filter property browser support wasn't really great 2 years ago. As of 2021, I surely go for it, and I dropped that Sass mixin. – enguerranws Apr 30 '21 at 08:56

2 Answers2