Como estou em um ciclo de pré-produção para desenvolver um aplicativo, geralmente mudo o visual para convergir para o que será validado pelo cliente.

Seria interessante manter alguns visuais da mesma página (chamados de temas), para que eu possa apresentá-los rapidamente ao cliente.

A maneira que eu encontrei é criar uma classe de aparência que eu coloquei no corpo e, alterando-a, eu poderia alterar a própria página de acordo.

Dito isto, estou interessado em tornar a globalização menos variável, como segue:

// default appearance
@navBarHeight: 50px;

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

Dessa forma, mais tarde no .less, venho com as seguintes classes:

#navBar {
    height: @navBarHeight;

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

Obviamente, o caso real é mais complexo.

É possível definir (ou redefinir) menos variáveis, dependendo da classe CSS de aparência?