Como tematizar em lesscss

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

Alguns visuais da mesma página (chame de temas) seriam interessantes de se manter para que eu possa apresentá-los rapidamente ao cliente.

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

Dito isto, estou interessado em tematização global menos variável, como segue:

// default appearance @navBarHeight: 50px; .appearanceWhite { @navBarHeight: 130px; } .appearanceBlack { @navBarHeight: 70px; } 

Desta forma, mais tarde no .less, eu tenho as classs da seguinte forma:

 #navBar { height: @navBarHeight; // appearance handling .appearanceBlack & { background-color: black; } .appearanceWhite & { background-color: white; } } 

Claro, o caso real se mais complexo.

É possível definir (ou redefinir) menos variables ​​dependendo de uma class CSS de aparência?

Tudo depende de quantos estilos e variables ​​diferem entre os temas, por exemplo, um ponto de vista (muito) básico poderia ser algo como:

  @temas:
     rgb azul (41, 128, 185),
     rgb marinho (22, 160, 133),
     rgb verde (39, 174, 96),
     rgb laranja (211, 84, 0),
     rgb vermelho (192, 57, 43),
     rgb roxo (142, 68, 173);

 // uso:

 #navBar {
     .themed (cor de fundo);
 }

 // implementação:

 @import "para" ;

 .themed (@property) {
     .for (@ temas);  .-each (@theme) {
         @name: extract (@theme, 1);
         @ cor: extract (@theme, 2);

         .theme - @ {name} & {
             @ {property}: @color;
         }
     }
 }

Então, com coisas como Pattern Matching , Ruleset Arguments , etc. etc., você pode obter a geração automatizada de qualquer hierarquia complexa de aparência / temas …

Por exemplo, quase o mesmo exemplo simples, mas com uma abordagem mais personalizável:

 // usage: #navBar { .themed({ color: @fore-color; background-color: @back-color; }); } // themes: .theme(@name: green) { @fore-color: green; @back-color: spin(@fore-color, 180); .apply(); } .theme(@name: blue) { @fore-color: blue; @back-color: (#fff - @fore-color); .apply(); } .theme(@name: black-and-white) { @fore-color: black; @back-color: white; .apply(); } // etc. // implementation: .themed(@style) { .theme(); .apply() { .theme-@{name} & { @style(); } } }