Como estoy en un ciclo de preproducción para desarrollar una aplicación, a menudo estoy cambiando visual para converger a lo que será validado por el cliente.

Sería interesante conservar algunos elementos visuales de la misma página (llámalo temas) para poder presentarlos rápidamente al cliente.

La forma en que encontré es crear una clase de apariencia que puse en el cuerpo y, al cambiarla, podría cambiar la página en sí.

Dicho esto, estoy interesado en tematizar la variable menos global como la siguiente:

// default appearance
@navBarHeight: 50px;

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

De esta manera, más tarde en .less, se me ocurren las siguientes clases:

#navBar {
    height: @navBarHeight;

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

Por supuesto, el caso real si es más complejo.

¿Es posible definir (o redefinir) menos variables dependiendo de una clase de apariencia CSS?