Genannt ein .Weniger unter der Bedingung abhängig reagieren mit

Question

Meine Seite auf React.JS ist, die mit dem Kompilieren weniger Lader

Ich versuche, um sicherzustellen, dass, wenn ich meine Grund styles.less Datei aufrufen variables.less innen konditionieren, weil ich verwenden mehrere Themen.

hätte ich das Thema der Informationen nicht, solange die Person nicht angemeldet ist.

Die Aufnahmen, die ich brauche, um die Basisdatei mit styles.less konditionierten variables.less importieren.

ich nicht wirklich etwas dagegen zu tun.

ich eine .Weniger Datei offensichtlich erstellen und fügen Sie es, wenn ich die Informationen wie dieses zu laden:, Hintergrund erfordert

import 'common/styles/less/brand/orange.less'; 

Aber es zwingt mich, alle Stile für jeden Artikel neu zu schreiben, die eine Farbänderung etc .. wie folgt:

@primaryColor  : #FF6600; 
//RESET BLUE COLOR BTN, HOVER, BORDER 
a{ 
    color:@primaryColor; 
    &:hover{ 
    color:darken(@primaryColor,5%); 
    } 
} 

Es gäbe da eine Lösung wie diese? Auf reactApp.jsx:

import styles={default} 'common/styles/less/styles.less'; 

Auf styles.less:

if(styles == 'default'){ 
    @import "./variables.less"; 
    elseif (styles == 'oranges'){ 
    @import "./variables-oranges.less"; 
    } 
} 

Irgendwelche Vorschläge vermeiden würden alle CSS neu zu schreiben ist nur Variable willkommen wäre, ich auf eine Art und Weise vollständig trocknen zu optimieren.

Mit freundlichen Grüßen!

Answer 1

Ich denke, Sie könnten ein kleines Missverständnis von weniger hier haben. Less ist nicht dazu gedacht, verschiedene CSS-Dateien basierend auf Benutzereingaben zu generieren. Sie möchten lieber alle Kombinationen im Voraus generieren und die CSS-Dateien basierend auf den Bedingungen bereitstellen. Sie können entweder vollständige CSS-Dateien einschließlich des Designs generieren oder eine generische CSS-Datei und zusätzliche CSS-Dateien für die Designs.

Eine mögliche Einrichtung könnte wie folgt aussehen:

• common.less: Ihr generisches Thema, die
• orangevars.less auf Variablen abhängt: variable Definitionen für das orange Thema
• bluevars.less: variable Definitionen für das blaue Thema
• orange.less: Dies enthält nur einen Import in die orange vars und das gemeinsame Thema
• blue.less: Dies enthält nur einen Import in den blauen vars und das gemeinsame Thema

Nach dem Kompilieren Sie haben würde:

• orange.css
• blue.css

Für eine nicht-themed CSS-Datei können Sie eine defaultvars hinzufügen. weniger, das neutrale Farben usw. enthält

---

Ein anderer Ansatz:

• base.less: einfach (neutral) Thematisierung
• blue.less: blau Thema, das auf der Basis fügt
• orange.less: orange Thema, das fügt auf der Basis

Es wäre erzeugen:

• base.css
• blue.css
• orange.css

Es gibt überhaupt keine Variablen hier, nur das gute alte CSS Cascading. Der gute Punkt dabei ist, dass Sie die base.css schon liefern können, bevor Ihr JS startet und ein Theme lädt. Sie können auch völlig verschiedene Aspekte des Themas im erweiternden CSS anpassen. Sie sind nicht dazu verpflichtet, nur Variablen für vordefinierte Regeln zu definieren - auf Kosten von doppelter Wartung und möglicherweise doppeltem Code.

Dieser Ansatz wird auch bevorzugt, wenn Sie Bibliotheken von Drittanbietern wie Bootstrap verwenden. Durch Erweiterung auf der CSS-Ebene können Sie die Bibliotheken später noch aktualisieren, ohne Ihre Änderungen zu verlieren.

---

Welche Sie an den Client liefern, können Sie dynamisch entscheiden (auf Client oder Server).