LESS CSS - Variabler Wert für Themenfarben je nach Körperklasse ändern

Question

LESS hier in den Griff bekommen, aber eine Sache ist noch ein wenig unklar.

Lets sagen, ich habe mehrere Farbthemen für meine Website, gesteuert von einer Klasse auf dem Body-Tag. Daraus kann ich die verschiedenen Farben für jedes Element in jedem Thema neu definieren. Einfach genug, aber ziemlich zeitaufwendig, wenn ich viele Elemente zu ändern habe ... und viele Themen. Jedes Mal, wenn ich ein neues Thema hinzufüge, muss ich alle Selektoren mit unterschiedlichen Farbwerten neu schreiben.

ich bin stützen sich bisher auf einem anderen Beitrag arbeitete ich gefunden: LESS.css variable depending on class

... es jedoch immer noch zu kompliziert scheint für das, was ich in das tun wollen ich habe noch alle Selektoren zu schreiben und Fügen Sie das Mixin hinzu, bevor Sie dasselbe CSS mit der Farbvariable einfügen.

Ich habe ein CODEPEN HERE

habe ich es schätzen würde, wenn jemand Zeit, ein wenig Blick zu nehmen hatte und mir raten, wie ich das anders angehen könnte oder wie ich diesen Prozess optimieren könnte.

Vielen Dank an alle, die :) aushilft

Answer 1

mit Ihnen bleiben Unter der Annahme zu Thema wollen sie in einem Stylesheet (und nicht mehrere Blätter wie cimmanon in den Kommentaren angegeben), und vorausgesetzt, Sie sind mit weniger 1.3. 2+, dann funktioniert der folgende Code, um den Umfang der Duplizierung zu reduzieren, indem eine Schleife durch die Klassen, die Themenänderungen benötigen, eingerichtet wird.

Beachten Sie, dass dies nicht auf Codepen funktioniert (ein Fehler uncaught throw # wirft, vielleicht weil sie eine frühere Version von LESS ausgeführt werden), aber man kann es richtig, indem Sie den Code in LESS's compiler kompilieren sehen.

LESS (basierend auf Ihren Codepen Code mit einem zusätzlichen Thema für 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 Output (nur die geschlungenen Thema css der Kürze halber zeigt)

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