Search code examples
csssasscompass-sass

Automatic darken color in Sass / Compass

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 ?

Solution

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