Cómo tematizar en lesscss

Como estoy en un ciclo de preproducción para desarrollar una aplicación, a menudo cambio de visual para convergir a lo que validará el cliente.

Algunos visuales de la misma página (llámenos temas) serían interesantes de guardar para poder presentarlos rápidamente al cliente.

La forma en que encontré es crear una clase de apariencia que agregué al cuerpo y al cambiarla pude cambiar la página en consecuencia.

Dicho esto, estoy interesado en la tematización global menos variable, como la siguiente:

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

De esta manera, más adelante en .less, se me ocurren las clases de la siguiente manera:

 #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 CSS de apariencia?

Todo depende de cuántos estilos y variables difieren entre los temas, por ejemplo, un punto de observación (muy) básico podría ser algo así como:

  @themes:
     rgb azul (41, 128, 185),
     rgb marino (22, 160, 133),
     rgb verde (39, 174, 96),
     rgb naranja (211, 84, 0),
     rgb rojo (192, 57, 43),
     rgb púrpura (142, 68, 173);

 // uso:

 #navBar {
     .themed (color de fondo);
 }

 // implementación:

 @import "para" ;

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

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

Luego, con cosas como Coincidencia de patrones , Argumentos de conjunto de reglas , etc. puedes obtener la generación automatizada de cualquier jerarquía compleja de apariencia / temática …

Por ejemplo, casi el mismo ejemplo simple pero con un enfoque más personalizable:

 // 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(); } } }