SCSS Suffix – was mache ich falsch?

[Rinnegan]

Hallo zusammen, folgendes funktioniert nicht. (Im Fronten wird nichts von meinen Einstellungen ausgegeben) Ich möchte mir mit den &-Selektoren meine "Card" im HTML über die Klasse "zusammenstylen" können:

HTML:

<div id="sidenav" class="card-bgWhite-shadow-border-tr-br">

SCSS:

<style>

.card {

    &-bgWhite {
        background-color: white;
    }

    &-shadow {
        box-shadow: 5px 2px 8px #eeeeee;
    }

    &-border {
    &-tl {
        border-top-left-radius: 10px;
    }
    &-tr {
        border-top-right-radius: 10px;
    }
    &-bl {
        border-bottom-left-radius: 10px;
    }
    &-br {
        border-bottom-right--radius: 10px;
    }
}

}

</style>

Danke und LG