Como tematizar em lesscss
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?