Automatic darken color in Sass / Compass

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

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

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

Related