Как правильно прописывать различные варианты цветов для кнопки?

Question

[Алексей Скляров]

Есть кнопка, для которой описываются цвета через модификаторы:

&--yellow {
    background-color: #fff324;
    &:hover {
      background-color: darken(#fff324,15%);
    }
    &:focus {
      background-color: darken(#fff324,25%);
    }
  }
  &--pink {
    background-color: $pcolor;
    color:#fff;
    &:hover {
      background-color: darken($pcolor,15%);
    }
    &:focus {
      background-color: darken($pcolor,25%);
    }
  }
  &--blue {
    background-color: #1c2f69;
    color:#fff;
    &:hover {
      background-color: darken(#1c2f69,3%);
    }
    &:focus {
      background-color: darken(#1c2f69,10%);
    }
  }

Как видите под каждый ховер и фокус нужно так же дописывать цвет кнопки, который я добавляю. Можно ли как-то описание ховера с фокусом вынести в родителя, так, чтобы при объявлении модификатора, я мог просто, например, переопределить переменную цвета и в родительский ховер и фокус она сразу же подставлялась?

Answer 1

[inkShio]

Миксин напиши и будет тебе счастье.

Answer 2

[Chelovekvekvek]

Вы можете выносить цвета в переменные, например $dark: darken(#1c2f69,10%); А далее использовать в стилях background-color: $dark;