MENO CSS - Cambia il valore della variabile per i colori dei temi in base alla classe di corpo

Question

Affrontare con MENO qui, ma una cosa è ancora un po 'poco chiara.

Diciamo che ho più temi di colore per il mio sito web, controllati da una classe sul tag del corpo. Da questo posso ridefinire i vari colori per ogni elemento all'interno di ciascun tema. Abbastanza facile ma abbastanza dispendioso in termini di tempo se ho molti elementi da cambiare ... e molti temi. Ogni volta che aggiungo un nuovo tema ho bisogno di scrivere di nuovo tutti i selettori, con valori di colore diversi.

sto basando il mio lavoro finora su un altro post ho trovato: LESS.css variable depending on class

... Tuttavia sembra ancora troppo complicato per quello che voglio fare in che ho ancora di scrivere tutti i selettori e includi il mixin prima di lasciarlo nello stesso CSS con la variabile color.

Ho creato un CODEPEN HERE

sarei grato se qualcuno ha avuto il tempo di prendere un po 'di sguardo e mi consigliare come avrei potuto affrontare in modo diverso o come avrei potuto semplificare questo processo.

Molte grazie a tutti coloro che aiuta :)

Answer 1

Supponendo che si rimane con la voglia di tema entro un foglio di stile (e non più fogli come cimmanon notato nei commenti), e supponendo che si sta utilizzando meno 1.3. 2+, il seguente codice funziona per ridurre la quantità di duplicazione impostando un ciclo attraverso le classi che richiedono modifiche ai temi.

Si noti che questo non funziona su Codepen (viene generato un errore uncaught throw #, forse perché è in esecuzione una versione precedente di LESS), ma è possibile vederlo compilare correttamente inserendo il codice in LESS's compiler.

MENO (in base al largo il codice Codepen con un tema aggiunto per demo)

////////////////////////////////////////////////////// 
// CONSTANTS 

@lightColour: #fff; 
@darkColour: #000; 
@lightBg: #fff; 
@darkBg: #000; 
@numberOfThemes: 3; //controls theme loop 

////////////////////////////////////////////////////// 
// MIXINS 

//Theme Definitions by parametric mixin numbers (1), (2), etc. 
.themeDefs(1) { 
    @lightColour: #f00; 
    @darkColour: #fff; 
    @lightBg: #f00; 
    @darkBg: #fff; 
} 

.themeDefs(2) { 
    //inverse of 1 
    @lightColour: #fff; 
    @darkColour: #f00; 
    @lightBg: #fff; 
    @darkBg: #f00; 
} 

.themeDefs(3) { 
    @lightColour: #cfc; 
    @darkColour: #363; 
    @lightBg: #cfc; 
    @darkBg: #363; 
} 


.curvy { 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 

////////////////////////////////////////////////////// 
// GENERAL STYLING 

* {padding: 0;margin: 0;} 
html {text-align: center;} 
h2 {padding: 20px 0;} 

.box { 
    .curvy; 
    color: @lightColour; 
    background: @darkBg; 
    display:inline-block; width:10%; padding:20px 5%; margin:0 1% 20px 1%; 
} 

////////////////////////////////////////////////////// 
// THEME BUILDING 

.buildThemes(@index) when (@index < @numberOfThemes + 1) { 

    .theme-@{index} { 
     .themeDefs(@index); 
     color: @lightColour; 
     background: @darkBg; 

     .box { 
     color: @darkColour; 
     background: @lightBg; 
     } 
    } 
    .buildThemes(@index + 1); 
} 
//stop loop 
.buildThemes(@index) {} 
//start theme building loop 
.buildThemes(1); 

uscita CSS (che mostra solo il css tema loop per brevità)

.theme-1 { 
    color: #ff0000; 
    background: #ffffff; 
} 
.theme-1 .box { 
    color: #ffffff; 
    background: #ff0000; 
} 
.theme-2 { 
    color: #ffffff; 
    background: #ff0000; 
} 
.theme-2 .box { 
    color: #ff0000; 
    background: #ffffff; 
} 
.theme-3 { 
    color: #ccffcc; 
    background: #336633; 
} 
.theme-3 .box { 
    color: #336633; 
    background: #ccffcc; 
}