How to register a variety of color choices for the buttons?

There is a button that describes the color using the 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 under each hover and focus you need to finish the color of the button that I added. Is it possible the description hover with a focus to bring in the parent, so that when you declare a modifier, I could just, for example, to override the color in the parent hover and focus, it immediately substitutes?
June 5th 19 at 21:36
2 answers
June 5th 19 at 21:38
Mixin write and you will have happiness.
June 5th 19 at 21:40
You can make the colors in variables, such as $dark: darken(#1c2f69,10%); And then use the styles background-color: $dark;

Find more questions by tags Sass