How to correctly prescribe different color options for a button?

Question

Sass

There is a button for which colors are described through modifiers:

&--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%);
    }
  }

As you can see, for each hover and focus, you also need to add the color of the button that I add. Is it possible to somehow transfer the description of the hover with focus to the parent, so that when declaring a modifier, I can simply, for example, override the color variable and it is immediately substituted into the parent hover and focus?

Answer 1

Mixin write and you will be happy.

Answer 2

You can map colors to variables like $dark: darken(#1c2f69,10%); And further to use in styles background-color: $dark;