Автоматический темный цвет в Sass/Compass

Я настраиваю CSS для сайта, где все ссылки в состоянии :hover темнее, чем в нормальном состоянии.

Я использую Sass/Compass, поэтому я посмотрел на метод darken Sass, здесь: http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method

Здесь используется: darken($color, $amount)

Мой вопрос: как я могу сделать это "автоматическим", чтобы все мои элементы <a> были на 80% более темными?

То, что я пытаюсь сделать, это синтаксис Sass:

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

Какое лучшее решение для этого?

Ответы

Ответ 1

Я подумал об этом.

Единственный способ, которым я нашел, - создать mixin:

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

И затем:

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

Не самое лучшее, но это сделает работу:)

Ответ 2

К настоящему времени лучше использовать фильтр в нативном CSS:

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