Manchmal ist es eine Herausforderung, den gesamten Code in einer Datei zu schreiben. Sass ermöglicht es, den Code in verschiedene Dateien und Ordner aufzuteilen. Dies vereinfacht die Wartung und das Refactoring des Codes.

sass Ordner

Unsere erste Aufgabe ist es, den sass Ordner im Projektstamm zu erstellen. Auf diese Weise lassen wir den Compiler wissen, dass wir Sass im Projekt verwenden.

sass Ordnerorganisation

Im sass Ordner:

1. Wir erstellen die Datei main.scss. Es ist die Hauptdatei für den Compiler. Wir werden alle Fragmente mit Hilfe der @import Direktive mit dieser Datei verbinden;
2. Wir erstellen verschiedene Ordner für die sass Partials. (z.B. der utilities Ordner für Variablen, der components Ordner für die sich wiederholenden Stile einiger Elemente, der base Ordner für die globalen Stile und das Zurücksetzen des Standardverhaltens von Elementen, und der layouts Ordner für nicht wiederholende Stile).

Partials

Jetzt sind wir bereit, Dateien hinzuzufügen und etwas Sass-Code zu schreiben, um den Elementen die Stile zu geben. Um die Struktur beizubehalten, erstellen wir eine Datei für jede Funktion. Der Dateiname muss mit dem Unterstrich (_) beginnen. Für den Compiler bedeutet dies, dass es sich nicht um die Hauptdatei handelt. Es ist eine Teildatei.

Die gesamte Struktur ist bereit. Wir können alle Dateien mit Hilfe der main.scss-Direktive in die @import-Datei importieren. Die Reihenfolge ist entscheidend. Zum Beispiel, wenn wir einige Variablen aus der Datei _variables.scss in der Datei _button.scss verwenden möchten, dann müssen wir den Import der Datei _variables.scss höher als den Import der Datei _button.scss innerhalb der main.scss-Datei halten.

Die Syntax zum Importieren der Datei ist wie folgt. Wir verwenden @import und doppelte Anführungszeichen (""), um den korrekten Pfad zur Datei anzugeben.

@import "path";

Der resultierende Inhalt in der main.scss-Datei ist wie folgt:

@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";

Hinweis

Wir haben die Grundlagen des Sass-Präprozessors betrachtet, die es uns ermöglichen, ihn für Projekte zu nutzen. Allerdings hat jeder Präprozessor eine Vielzahl unterschiedlicher Funktionen. Alle davon abzudecken, unterscheidet sich vom Plot dieses Kurses.