CSS verwalten verschiedene Farbschemata für 2 Standorte

Question

Ich habe 2 ziemlich große Websites, die strukturell identisch sind, aber unterschiedliche Marken haben werden. Was wäre der beste Weg, um mein CSS zu strukturieren/zu bauen, um einen Wartungsalbtraum durch das Duplizieren von Dateien zu vermeiden?

Zum Beispiel, wenn ich 2 CSS-Dateien wie Site-1 und Site-2, die aus 2 weniger Dateien, die das unterschiedliche Branding enthalten, generiert habe, könnte ich die richtige Datei basierend auf der Website, die ausgeführt wird. Ich werde jedoch immer noch Änderungen zweimal in 2 verschiedenen Dateien vornehmen müssen/neue Sachen zu 2 verschiedenen Orten usw. hinzufügen.

Gibt es eine Möglichkeit, dies zu vermeiden?

Ich möchte etwas wie folgt aus::

Zwei variable weniger Dateien (colours1 und colours2) und eine Site-Datei (Site-Struktur sagen)

Um etwas genauer zu sein.

Die Variablen in jeder Variablen-Datei würden genau das gleiche genannt werden.

Ich hätte dann site1 und site2 weniger Dateien. In site1 würde ich 2 Importsanweisungen importieren, site-structure importieren und colours1 importieren. Das sind alles keine tatsächlichen Klassenanweisungen, da diese nur zum Generieren dienen.

Der Import der Farben-Datei würde die Farben in Site-Struktur-Datei überschreiben, so habe ich eine generierte Site1-Datei, die mit colours1 gebrandmarkt ist.

Ebenso für colours2.

Dann habe ich nur jemals irgendwelche Änderungen zu 1 Datei hinzufügen müssen (Site-Struktur) und regenerieren meine site1 und site2 Dateien

Das Problem ist, dass ich brauche, um die Variablen-Datei in der Website-Struktur-Datei importieren würde um es zu kompilieren.

Also meine Frage könnte sein, gibt es eine Möglichkeit, diese Überschreibung in Less/Sass zu tun oder gibt es einen besseren Weg, es zu tun?

Dank

Answer 1

arbeitete ich mit einem ähnlichen Aufbau vor, wir LESS verwendet haben.

Wir hatten 2 Haupt .less Dateien, in denen jeder eine "variable" Datei für die spezifische Site importierte. z.B. site1.less Importe variables-site1, site2.less Importe variables-site2.

Das bedeutet, dass Sie 2 kompilierte CSS-Dateien haben, die Sie für Ihre beiden Websites verwenden können.

EDIT: Hier ein Beispiel: https://plnkr.co/edit/HcGRVgFdm1LfxQOCdGY0?p=preview Sie können den Link-Tag im Beispiel ändern:

<link rel="stylesheet/less" type="text/css" href="site1.less" /> 

zu:

<link rel="stylesheet/less" type="text/css" href="site2.less" /> 

die Änderung in der Seite zu sehen.

im Beispiel die folgenden Dateien:

--site1.less 
-var1.less 

--site2.less 
-var2.less 

--shared.less 

Inhalt site1.less:

@import "var1"; 
@import "shared"; 

Inhalt site2.less:

@import "var2"; 
@import "shared"; 

Inhalte geteilt. weniger:

h1{ 
    color: @header-colour; 
} 

Auf diese Weise haben Sie alle freigegebenen Inhalte in shared.less, die Dateien site1 und site2 sind nur Eintrittspunkte für die Erstellung von Dateien und var1 und var2 sind Ihre variablen Dateien.

this helps

Answer 2

Sie eine main.less Datei und haben zwei site1.less und site2.less haben.

In diesen Dateien Sie Ihre Farbe variabel definieren und importieren Sie die main.less Datei nach dem

@main_color: #aabbcc; 
@secondary_color: #aabbdd; 
@tertiary_color: #abcdee; 
. 
. 
. 
@import "path to main.less" 

Auf diese Weise können Sie halten auf Änderungen nur auf die main.less Datei vornehmen und bei Bedarf nur die Farbvariablen in der ändern site .less files