SASS-Module

Dieser Artikel erklärt SASS-Module.

Wir erklären, wie man SASS mithilfe von @use und @forward modularisiert und wie Variablen, Mixins, Funktionen, Theme-Einstellungen und öffentliche APIs wiederverwendet werden können.

YouTube Video

SASS-Module

Das Modulsystem von SASS hilft dabei, Styles eindeutig zu kapseln und ermöglicht ein Design, das einfach wiederzuverwenden und zu pflegen ist.

Grundkonzepte von Modulen

SASS-Module lösen die Probleme der Verschmutzung des globalen Namensraums und unklarer Abhängigkeiten, die mit dem alten @import vorhanden waren. Jede Datei wird als Modul mit eigenem Namensraum geladen und nur explizit exportierte Elemente sind aus anderen Dateien zugänglich.

Beispiel für eine Dateistruktur

Hier zunächst ein Beispiel für eine realistische Projektstruktur. Nachfolgend ein Beispiel für ein kleines Designsystem.

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• Diese Struktur erleichtert die Modularisierung sowie das Testen und Ersetzen von Teilen.
• Partial-Dateien haben einen Unterstrich am Anfang des Dateinamens.

Grundlagen von @use

@use lädt ein Modul und stellt einen Namensraum zur Verfügung. Dies verhindert Namenskonflikte und macht das Ursprungsmodul deutlich.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• Diese Datei ist eine einfache Datei, die nur Variablen definiert. Variablen, die aus einem Modul veröffentlicht werden, können direkt über @use referenziert werden.

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• Hier wird das Modul variables mit dem Namensraum variables. referenziert. Dieser Ansatz macht die Herkunft jedes Elements deutlich.

Namensräume abkürzen oder Aliase verwenden

Mit as kann der Namensraum abgekürzt werden.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• Dies ist ein Beispiel für den Import von variables mit dem kürzeren Alias vars. Wählen Sie Namen, je nachdem, ob Sie Lesbarkeit oder Tippeffizienz bevorzugen.

Mixin-Definition

Mixins und Funktionen können ebenfalls innerhalb von Modulen definiert und genutzt werden. Einheitliche Kommentare entsprechend den Projektkonventionen sorgen für Übersichtlichkeit.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• Diese Datei definiert ein Mixin für Container. Es nimmt Argumente an und bietet Standardwerte.

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• Dies ist ein Beispiel für die Verwendung eines Mixins mit @include.

Funktionen definieren

Funktionen werden verwendet, um Werte zurückzugeben und können innerhalb von Modulen definiert und wiederverwendet werden. Indem Berechnungen für Designwerte in Funktionen gekapselt werden, werden Styles stabiler und leichter zu pflegen.

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• Diese Datei definiert eine Funktion, die Pixelwerte in rem umwandelt. Ein Standardbasiswert wird ebenfalls angegeben.

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• Hier ist ein Beispiel, wie eine Funktion über @use aufgerufen und das Ergebnis auf einen Style angewendet wird.

Modulexport und @forward (API-Gestaltung)

Wenn Sie mehrere interne Dateien nach außen freigeben möchten, können Sie mit @forward eine 'Public API' erstellen.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• Mehrere interne Dateien können zu einem einzigen Einstiegspunkt zusammengefasst werden, der dann die öffentliche API bereitstellt. So können Nutzer alle benötigten Funktionen durch das Importieren eines Ein-/Ausgangspunktes nutzen.

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• Die Inhalte von variables und mixins werden gemeinsam über das index angesprochen. @forward macht index zur öffentlichen Schicht.

Steuerung der API mit den Optionen show / hide von @forward

Wenn Sie nur bestimmte Variablen veröffentlichen möchten, nutzen Sie die Option show oder hide.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• Mit der Hinzufügung von !default können Sie einen Wert veröffentlichen, der überschrieben werden kann.

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• Mit show zusammen mit @forward können Sie die veröffentlichte API auf die notwendigen Elemente beschränken. Intern genutzte Variablen und Funktionen sind von außen nicht sichtbar.

Module konfigurierbar machen (mit with)

Wenn Sie im Modul !default verwenden, können Werte bei der Einbindung mit with überschrieben werden.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• Ein Modul mit per !default definierten Standardwerten kann Konfigurationen über with akzeptieren.

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• with in @use ermöglicht es, Standardvariablen eines Moduls beim Import zu überschreiben. Dies ist nützlich für das Wechseln von Themes.
• Beachten Sie, dass with nur zum Zeitpunkt des Imports wirkt und die Werte später nicht mehr geändert werden können.

Praktisches Beispiel: Button-Komponente (Vollständiges Beispiel)

Lassen Sie uns Button-Styles mit Modulen entwerfen. Zunächst Variablen und Mixins in eigene Module aufteilen.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• Standardvariablen für Buttons werden hier definiert. Die Verwendung von !default erlaubt es den Nutzern, diese Werte zu überschreiben.

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• Das grundlegende Mixin für Buttons wird hier definiert. Sie sind zur einfacheren Wiederverwendung getrennt.

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• Button-Styles werden mit Namensraumreferenzen mittels @use erstellt. Eine Variante wird als .button--large definiert.

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• Durch das Importieren des button-Moduls können Sie die Button-Styles sofort verwenden.

Theme-Wechsel (Verwendung mehrerer Theme-Dateien)

Theme-Wechsel kann durch Konfiguration mit with oder durch separate Module erfolgen, wobei gesteuert wird, welches Modul mit @use eingebunden wird.

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• Definieren Sie Markenfarben und andere Einstellungen in mehreren Theme-Dateien und wechseln Sie diese beim Build oder Import.

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• Wählen Sie das Theme, indem Sie entweder with verwenden oder zum Beispiel @use 'themes/light' während des Build-Prozesses importieren.

Privat und öffentlich (Präfix _ und !default)

In SASS kennzeichnet ein Unterstrich am Anfang eines Dateinamens diese Datei als Partial. Um die Sichtbarkeit beim Modulexport zu steuern, verwenden Sie show und hide bei @forward, um die Exporte zu kontrollieren.

Mit @forward können Sie die öffentliche API organisieren und interne Implementierungen verbergen.

Best Practices für den realen Einsatz

Nachfolgend sind einige grundlegende Konzepte aufgeführt, die bei der praktischen Verwendung von SASS nützlich sind. Alle diese Richtlinien helfen, während der Entwicklung Verwirrung zu vermeiden und den Code übersichtlich zu halten.

• Wenn Variablen wahrscheinlich als Teil eines Themes geändert werden, fügen Sie !default hinzu. Dadurch wird es für Benutzer einfacher, Werte zu überschreiben.
• Module sollten nach Verantwortlichkeiten getrennt und auf eine einzige Aufgabe fokussiert sein. Durch das Trennen von Variablen, Mixins und Komponenten wird die Verwaltung einfacher.
• Verwalten Sie öffentliche Inhalte mit @forward und verwenden Sie show oder hide nach Bedarf. Die genaue Definition, was öffentlich ist, führt zu sichereren Designs.
• Verwenden Sie Namensräume, um klar anzugeben, zu welchem Modul jede Funktion gehört. So werden Verwechslungen mit anderem Code vermieden.
• Beachten Sie, dass with nur zum Zeitpunkt von @use funktioniert. Da Sie diese Werte später nicht mehr ändern können, nehmen Sie Konfigurationen beim Import vor.
• Verwenden Sie einen Unterstrich am Dateianfang, um daraus eine Partial-Datei zu machen, sodass sie nicht einzeln kompiliert wird. So lassen sich Dateien leichter zu größeren Strukturen zusammenfassen.
• Die Einbindung von Anwendungsbeispielen im index-Modul unterstützt Test und Dokumentation. So können Nutzer das Verhalten leichter verstehen.

Wenn Sie diese Punkte beachten, können Sie große Projekte besser verwalten und als Team lesbaren Code erhalten.

Zusammenfassung

Das SASS-Modulsystem organisiert den Style-Code durch Namespaces, öffentliche APIs und vereinfachte Konfiguration. Geschickter Einsatz von @use und @forward erleichtert die Team-Entwicklung, den Theme-Wechsel und das Design von Bibliotheken erheblich.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video