2017-12-28 3 views
1

Ich bin neu bei SASS und versuche Benutzern verschiedene Designs für eine Website zu geben. Ich habe eine Karte, die wie folgt aussieht:Erstellen von Designs mit SASS (Maps)

$theme-map: ( 
    main-theme: (
     primary: #007991, 
     secondary: #55D3AE, 
     tertiary: #D35555, 
     gradientFirstColour: #007991, 
     gradientSecondColour: #34EBE9 
), 
    test-theme: (
     primary: #1abc9c, 
     secondary: #e67e22, 
     tertiary: #c0392b, 
     gradientFirstColour: #2c3e50, 
     gradientSecondColour: #f1c40f 
    ) 
) 

Jetzt bin ich nicht sicher, wie durch diese Schleife und dann auf bestimmte Elemente anzuwenden. Beispiel: Ich möchte das Hauptthema auswählen und dann die Grundfarbe für den Hintergrund einer Schaltfläche, die Sekundärfarbe für den Hintergrund eines Divs und die gleiche Sache verwenden, wenn ich das Testthema auswähle. Kann mir bitte jemand helfen?

Vielen Dank im Voraus!

Antwort

0

Ich glaube, es gibt viele Möglichkeiten, dies zu implementieren, ich habe Erfahrung mit etwas Ähnliches in der Vergangenheit, also hier ist meine Implementierung.

Schritt 1

mehr CSS-Ausgabedateien für die verschiedene Themen erstellen Sie haben, in Ihrem Fall main.css und test.css. Sie könnten den Namen auch vorangestellt werden, um sie verständlicher zu machen, zum Beispiel theme-main.css und theme-test.css.

Ich würde empfehlen, allgemeine Stile - wie Reset, Ränder, Typografie - in einer Datei, so etwas wie global.css und fügen Sie Ihre Themen darüber in separaten Dateien. Laden Sie diese CSS-Dateien in Ihrem HTML-Code übereinander.

Hauptthema:

<link href="global.css" rel="stylesheet" type="text/css"> 
<link href="theme-main.css" rel="stylesheet" type="text/css"> 

und Test Thema:

<link href="global.css" rel="stylesheet" type="text/css"> 
<link href="theme-test.css" rel="stylesheet" type="text/css"> 

In Ihrem Projekt Sass Ordner erstellen theme-main.scss und theme-test.scss, entlang global.scss.

Schritt 2

Ihr Thema Farben in verschiedene Teil Sass Dateien verschieben und der Name der Variablen, stellen Sie sicher, das gleiche ist. Ich würde persönlich Ordner im Sass-Ordner des Projekts mit Namen erstellen, die meinen CSS-Ausgabedateien entsprechen, und diese Dateien dort ablegen.

In Ihrem Fall erstellen Sie einen Ordner _theme-main und _theme-test im Ordner Sass. Erstellen Sie eine Datei in jedem Ordner, benennen Sie sie beide _variables.scss mit folgendem Inhalt:

In _theme-main/_variables.scss:

$colors: (
    primary: #007991, 
    secondary: #55D3AE, 
    tertiary: #D35555, 
    gradientFirstColour: #007991, 
    gradientSecondColour: #34EBE9 
); 

Und in _theme-test/_variables.scss:

$colors: (
    primary: #1abc9c, 
    secondary: #e67e22, 
    tertiary: #c0392b, 
    gradientFirstColour: #2c3e50, 
    gradientSecondColour: #f1c40f 
); 

Schritt 3

Last die notwendigen Variablen in den Dateien, wo Sie sie brauchen.

In Ihrer Datei theme-main.scss setzen:

@import '_theme-main/variables'; 

Und in der Datei theme-test.scss setzen:

@import '_theme-test/variables'; 

Bisher stellt dies sicher, dass die verschiedenen Themen Dateien mit unterschiedlichen Werten der arbeiten kann gleiche Variablen. In Wahrheit wird die Variable $colors in diesen beiden Themendateien einfach gleich genannt, in Wirklichkeit sind sie nicht die gleichen.

Schritt 4

erstellen eine Teil Sass mit den Stilen Datei, die Sie auf die Themen anwenden möchten.

Da wir bereits die Abhängigkeiten von theme-main.scss im _theme-main Ordner abgelegt und die Abhängigkeiten von theme-test.scss im _theme-test Ordner, ich persönlich würde nicht wollen, dieses Muster zu brechen, so würde ich einen shared Ordner oder etwas ähnliches und setze teilweise Sass erstellen Dateien, die dort in mehrere Sass-Dateien importiert werden. Sie könnten dies natürlich überspringen, aber ich glaube, dies hilft, Ihr Projekt wartungsfreundlicher zu halten.

Bleiben Sie bei Ihrem Beispiel, erstellen Sie eine partielle Sass-Datei namens _styles.scss und legen Sie es in Ihrem Ordner shared. Setzen Sie den folgenden Code in ihm:

button { 
    background-color: map-get($colors, primary); 
} 

div { 
    background-color: map-get($colors, secondary); 
} 

Und jetzt alles, was Sie tun müssen, ist importiert diese Teildatei in Ihren Theme-Dateien.

In Ihrer Datei theme-main.scss setzen:

@import '_theme-main/variables'; 
@import 'shared/styles'; 

Und in der Datei theme-test.scss setzen:

@import '_theme-test/variables'; 
@import 'shared/styles'; 

Wenn ich keine Fehler gemacht habe, die Ausgabe CSS-Dateien sollten wie folgt aussehen:

theme-main.css:

button { 
    background-color: #007991; 
} 

div { 
    background-color: #55D3AE; 
} 

theme-test.css:

button { 
    background-color: #1abc9c; 
} 

div { 
    background-color: #e67e22; 
} 

Lassen Sie mich wissen, wenn Sie dies nützlich oder wenn Sie weitere Fragen oder Bedenken haben zu finden.

+1

danke für so eine tolle und so detaillierte antwort !! Ich habe nur eine Frage, (ich bin ein Anfänger BTW) Wie würde ich jedes Thema mit Javascript zum Beispiel aktiv? – JuliaM

+0

Es könnte viele Möglichkeiten geben, ein solches Feature zu implementieren. Ich stelle [eine kleine Demo auf CodePen] (https://codepen.io/pentzzsolt/pen/MrmoBO) zusammen, guck mal rein! In diesem Beispiel wird davon ausgegangen, dass zu einem bestimmten Zeitpunkt genau eine CSS-Datei für ein Thema geladen ist, also beim ersten Laden und später auch. Wenn Sie möchten, dass die Site sich an die Auswahl eines Benutzers erinnert, müssen Sie Cookies verwenden, um diese Informationen zu speichern und sie beim erneuten Besuch der Site oder beim Navigieren zu einer anderen Seite abzurufen. – pentzzsolt

Verwandte Themen