Wie man im Unterricht thematisiert

Während ich mich in einem Vorproduktionszyklus befinde, um eine App zu entwickeln, ändere ich häufig das Erscheinungsbild, um dem zu entsprechen, was vom Kunden bestätigt wird.

Es wäre interessant, einige Bilder derselben Seite (sogenannte Themen) beizubehalten, damit ich sie dem Kunden schnell präsentieren kann.

Die Art und Weise, wie ich sie gefunden habe, ist, eine Erscheinungsklasse zu erstellen, die ich dem Körper hinzugefügt habe, und durch Ändern der Klasse die Seite selbst entsprechend zu ändern.

Das heißt, ich bin daran interessiert, globale weniger variable wie folgt zu thematisieren:

// default appearance
@navBarHeight: 50px;

.appearanceWhite {
    @navBarHeight: 130px;
}
.appearanceBlack {
    @navBarHeight: 70px;
}

Auf diese Weise habe ich später im .less-Format folgende Klassen erstellt:

#navBar {
    height: @navBarHeight;

    // appearance handling
    .appearanceBlack & {
        background-color: black;
    }
    .appearanceWhite & {
        background-color: white;
    }
}

Natürlich ist der tatsächliche Fall komplexer.

Ist es möglich, weniger Variablen in Abhängigkeit von einer CSS-Klasse für das Erscheinungsbild zu definieren (oder neu zu definieren)?