$red: red;
$blue: blue;
$green: green;
$mixQuotient: 5%;
$purple: mix($red, $blue);

$mixedValues: (100vw + 50px);

// coloured cards with colour mix modifiers
.card {
    &.red {
        background: $red;
        &.mix--blue {
            background: mix( $red, $blue, $mixQuotient);
        }
    }
    &.blue {
        background: $blue;
        &.mix--red {
            background: mix($blue, $red, $mixQuotient);
        }
    }
    &.purple {
        background: $mixedValues
    }
}