Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Organisation von Sass-Dateien für Skalierbare Projekte | CSS-Präprozessoren und Sass
Fortgeschrittene CSS-Techniken

bookOrganisation von Sass-Dateien für Skalierbare Projekte

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

sass-Ordner

Die erste Aufgabe besteht darin, den Ordner sass im Projektstammverzeichnis zu erstellen. Dadurch wird dem Compiler signalisiert, dass Sass im Projekt verwendet wird.

sass-Ordnerstruktur

Im sass-Ordner:

  1. Wir erstellen die Datei main.scss. Sie ist die Hauptdatei für den Compiler. Alle Fragmente werden mit Hilfe der @import-Direktive in diese Datei eingebunden.
  2. Wir erstellen verschiedene Ordner für die Sass-Partials (z. B. den Ordner utilities für Variablen, den Ordner components für wiederkehrende Stile bestimmter Elemente, den Ordner base für globale Stile und das Zurücksetzen des Standardverhaltens von Elementen sowie den Ordner layouts für nicht wiederkehrende Stile).

Partials

Nun sind wir bereit, Dateien hinzuzufügen und Sass-Code zu schreiben, um den Elementen Stile zuzuweisen. Um die Struktur beizubehalten, erstellen wir für jede Funktionalität eine eigene Datei. Der Dateiname muss mit einem Unterstrich (_) beginnen. Für den Compiler bedeutet dies, dass es sich nicht um die Hauptdatei handelt, sondern um ein Partial.

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. Wenn beispielsweise Variablen aus der Datei _variables.scss in der Datei _button.scss verwendet werden sollen, muss der Import der Datei _variables.scss in der _button.scss-Datei vor dem Import der Datei main.scss stehen.

Die Syntax für den Import einer Datei ist wie folgt. Es wird @import verwendet und doppelte Anführungszeichen (""), um den korrekten Pfad zur Datei anzugeben.

@import "path";

Der resultierende Inhalt in der Datei main.scss sieht wie folgt aus:

@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 verwenden. Allerdings verfügt jeder Präprozessor über eine Vielzahl unterschiedlicher Funktionen. Alle davon abzudecken, liegt außerhalb des Rahmens dieses Kurses.

question mark

Was ist der empfohlene Speicherort für Dateien im Ordner "sass"?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain what a Sass partial is and why the filename starts with an underscore?

How does the folder structure help in organizing large Sass projects?

Can you show an example of how to use variables from one partial in another?

Awesome!

Completion rate improved to 2.04

bookOrganisation von Sass-Dateien für Skalierbare Projekte

Swipe um das Menü anzuzeigen

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

sass-Ordner

Die erste Aufgabe besteht darin, den Ordner sass im Projektstammverzeichnis zu erstellen. Dadurch wird dem Compiler signalisiert, dass Sass im Projekt verwendet wird.

sass-Ordnerstruktur

Im sass-Ordner:

  1. Wir erstellen die Datei main.scss. Sie ist die Hauptdatei für den Compiler. Alle Fragmente werden mit Hilfe der @import-Direktive in diese Datei eingebunden.
  2. Wir erstellen verschiedene Ordner für die Sass-Partials (z. B. den Ordner utilities für Variablen, den Ordner components für wiederkehrende Stile bestimmter Elemente, den Ordner base für globale Stile und das Zurücksetzen des Standardverhaltens von Elementen sowie den Ordner layouts für nicht wiederkehrende Stile).

Partials

Nun sind wir bereit, Dateien hinzuzufügen und Sass-Code zu schreiben, um den Elementen Stile zuzuweisen. Um die Struktur beizubehalten, erstellen wir für jede Funktionalität eine eigene Datei. Der Dateiname muss mit einem Unterstrich (_) beginnen. Für den Compiler bedeutet dies, dass es sich nicht um die Hauptdatei handelt, sondern um ein Partial.

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. Wenn beispielsweise Variablen aus der Datei _variables.scss in der Datei _button.scss verwendet werden sollen, muss der Import der Datei _variables.scss in der _button.scss-Datei vor dem Import der Datei main.scss stehen.

Die Syntax für den Import einer Datei ist wie folgt. Es wird @import verwendet und doppelte Anführungszeichen (""), um den korrekten Pfad zur Datei anzugeben.

@import "path";

Der resultierende Inhalt in der Datei main.scss sieht wie folgt aus:

@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 verwenden. Allerdings verfügt jeder Präprozessor über eine Vielzahl unterschiedlicher Funktionen. Alle davon abzudecken, liegt außerhalb des Rahmens dieses Kurses.

question mark

Was ist der empfohlene Speicherort für Dateien im Ordner "sass"?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 7
some-alt