SCSS

HTML

<button class='btnSecondary'>secondary</button>
<button class='btnPrimary'>primary</button>
<button class='btnTest'>test</button>

SCSS

$white: #fff;
$text: #393939;
$font-std: 18px;
$transition-std: 0.4s ease all;
$primary: #f8e421;
$secondary: #354052;

@function ligthOrDark($color) {
    $result: red;

    @if (blackness($color) == 50) { // fails with > 50 or < 50
        $result: green;
    }

    @return $result;
}

@mixin buttonStyles($color) {
    font-size: $font-std;
    color: $text;
    padding: 1rem 3rem;
    background-color: $color;
    color: $white;
    transition: $transition-std;

    &:hover {
        cursor: pointer;
        background-color: lighten($color, 15%);
    }
    &:focus {
        background-color: lighten($color, 10%);
    }
    &:active {
        background-color: lighten($color, 25%);
    }
}
.btnPrimary {
    @include buttonStyles($primary);
}
.btnSecondary {
    @include buttonStyles($secondary);
}
.btnTest {
    @include buttonStyles($secondary);
    color: ligthOrDark($primary) !important;
}