LESS CSS - Zmień wartość zmiennej dla kolorów motywów w zależności od klasy ciała

Question

Zajmuje się tutaj LESS, ale jedno jest wciąż niejasne.

Powiedzmy, że mam wiele motywów kolorystycznych dla mojej witryny, kontrolowanych przez klasę na znaczniku body. Dzięki temu mogę przedefiniować różne kolory dla każdego elementu w ramach każdego motywu. Wystarczająco łatwe, ale dość czasochłonne, jeśli mam wiele elementów do zmiany ... i wiele tematów. Za każdym razem, gdy dodaję nowy motyw, muszę ponownie wypisać wszystkie selektory, z różnymi wartościami kolorów.

ja opierając moją pracę tak daleko na innym poście znalazłem: LESS.css variable depending on class

... Jednak wciąż wydaje się zbyt skomplikowane dla co chcę zrobić, że mam jeszcze napisać wszystkie selektorów i włącz mixin zanim wpadniesz do tego samego CSS ze zmienną koloru.

Stworzyłem CODEPEN HERE

bym wdzięczny, gdyby ktoś miał czas, aby zająć trochę wygląd i mi doradzić w jaki sposób mógłbym podejść do tego inaczej lub jak mogę usprawnić ten proces.

Wielkie dzięki dla każdego, kto przyczynia się :)

Answer 1

Zakładając, że pozostanie z chcąc tematu to w ciągu jednego arkusza stylów (a nie wielu arkuszach jako cimmanon odnotowanych w komentarzach), a zakładając używasz MNIEJ 1.3. 2+, następnie następujący kod działa w celu zmniejszenia ilości duplikacji poprzez ustawienie pętli przez klasy, które wymagają zmian motywu.

Należy pamiętać, że to nie działa na Codepen (to jest rzucanie błąd uncaught throw #, być może dlatego, że korzystasz ze starszej wersji mniej), ale widać, że kompilowanie prawidłowo umieszczając kod do LESS's compiler.

mniej (oparte off kod Codepen z dodatkiem tematu 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); 

CSS wyjścia (tylko pokazano zapętlone css temat dla zwięzłość)

.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; 
}