Das `@forward` in SASS

Dieser Artikel erklärt das @forward in SASS.

Wir erklären @forward auf verständliche Weise, einschließlich praktischer Beispiele.

YouTube Video

Das @forward in SASS

Was ist @forward?

Im Modulsystem von SASS verwendet man @use und @forward anstelle von @import. @forward ist eine wichtige Funktion, um Ihre Architektur sauber zu halten. Es ist eine Direktive, mit der Variablen, Mixins und Funktionen, die in anderen Dateien definiert sind, 'exponiert' werden. Statt es alleine zu verwenden, dient es als Einstiegspunkt, der angibt: 'Dieses Modul ab hier verwenden.'.

1@forward "variables";

• Dieser Code bewirkt, dass der Inhalt von variables.scss von anderen Dateien aus nutzbar gemacht wird.

Unterschied zwischen @use und @forward

@use und @forward sind beides Syntaxen zur Handhabung von Modulen, aber ihre Zwecke sind eindeutig verschieden. @use ist eine Direktive, um Elemente innerhalb einer Datei zu verwenden, und @forward ist eine Direktive, um Elemente für andere Dateien verfügbar zu machen.

1// @use: import the module for use in this file
2@use "variables";
3
4// @forward: re-export the module for other files to consume
5@forward "variables";

• @use zeigt die für die Implementierung der aktuellen Datei notwendigen Abhängigkeiten an, während @forward die Datei als öffentlichen API-Einstiegspunkt nutzbar macht. Dieses Verständnis hilft Ihnen zu entscheiden, wo Sie @forward einsetzen sollten.

Warum ist @forward notwendig?

Wenn Sie mehr Sass-Dateien hinzufügen, müssen Sie möglicherweise viele @use-Anweisungen schreiben. Durch die Nutzung von @forward können Sie alles in einer einzigen Einstiegsdatei zentralisieren.

1styles/
2├─ foundation/
3│  ├─ _variables.scss
4│  ├─ _mixins.scss
5│  └─ _index.scss
6└─ main.scss

• In dieser Struktur dient _index.scss als öffentliche API.

Grundlegende Verwendung von @forward

Schauen wir uns die grundlegende Anwendung von @forward an.

1// _variables.scss
2// Color definitions used across the project
3
4$primary-color: #006ab1;
5$secondary-color: #e0f0ff;
6
7// Internal use only (will be hidden via @forward hide)
8$debug-color: magenta;

• Statt diese Variable direkt mit @use einzubinden, gruppieren Sie sie mittels @forward.

1// _index.scss
2@forward "variables";

• Zu diesem Zeitpunkt enthält _index.scss nichts; es ist nur eine Weiterleitungsdatei.

Verwenden von Modulen, die mit @forward weitergegeben wurden

Anstatt einzelne Dateien direkt mit @use einzubinden, verwenden Sie auf der Konsumentenseite nur die Indexdatei, die die @forwards gruppiert hat. So können Sie es als stabile Schnittstelle benutzen, ohne die interne Struktur kennen zu müssen.

1// main.scss
2// Import the public API of the foundation layer
3@use "foundation";
4
5.button {
6  background-color: foundation.$primary-color;
7}

• Mit diesem Design können Sie selbst dann, wenn sich die Definitionen von Variablen oder Mixins ändern, die interne Struktur austauschen, ohne Code bei den Konsumenten anpassen zu müssen.

Kombinieren mehrerer Module mit @forward

In der tatsächlichen Entwicklung ist es üblich, Variablen, Mixins und Funktionen entsprechend ihrer Rollen aufzuteilen. @forward kann mehrfach verwendet werden, wodurch Sie getrennte Module zu einer einzigen öffentlichen API zusammenfassen können.

Unten geben wir Beispiele für Mixins und Funktionen und zeigen ein Design, das sie nach außen als einzige Schnittstelle zugänglich macht.

 1// _mixins.scss
 2// Reusable mixins for layout and components
 3
 4// Reset default button styles
 5@mixin button-reset {
 6  appearance: none;
 7  background: none;
 8  border: none;
 9  padding: 0;
10  margin: 0;
11  font: inherit;
12  color: inherit;
13}
14
15// Clearfix utility
16@mixin clearfix {
17  &::after {
18    content: "";
19    display: table;
20    clear: both;
21  }
22}
23
24// Internal mixin (not intended to be part of the public API)
25@mixin debug-outline {
26  outline: 2px dashed red;
27}

 1// _functions.scss
 2// Utility functions for consistent styling
 3
 4@use "sass:math";
 5
 6// Convert px to rem based on a 16px root size
 7@function rem($px) {
 8  @return math.div($px, 16) * 1rem;
 9}
10
11// Clamp a value between a minimum and maximum
12@function clamp-value($value, $min, $max) {
13  @return math.max($min, math.min($value, $max));
14}

1// _index.scss
2// Re-export variables, mixins, and functions as a single public API
3@forward "variables";
4@forward "mixins";
5@forward "functions";

• Indem Sie nur diese index-Datei nach außen freigeben, können Sie die interne Struktur verbergen und eine benutzerfreundliche Schnittstelle für Konsumenten bieten.

Vermeidung von Namenskonflikten (as)

Wenn in mehreren Modulen dieselben Variablen- oder Mixin-Namen definiert sind, können Sie bei @forward mit as einen Präfix beim Exponieren hinzufügen, um Namenskonflikte zu vermeiden.

1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;

Mit diesem Code wird $primary-color aus variables unter folgendem Namen bereitgestellt:.

1// foundation.$var-primary-color

• Diese Methode ist eine klare Möglichkeit, Designregeln zu definieren und sicher zu skalieren, und eine wesentliche Technik, insbesondere bei großen Projekten oder gemeinsam genutzten Bibliotheken.

Ausblenden unnötiger Mitglieder (hide)

Module können Variablen oder Mixins enthalten, die nur für die interne Implementierung gedacht sind. Mit hide können Sie diese beim erneuten Exponieren ausschließen und verhindern, dass darauf extern zugegriffen wird.

1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;

Mit dieser Konfiguration ist $debug-color nur im Modul selbst gültig, was hilft, eine versehentliche Nutzung durch Konsumenten zu vermeiden.

Festlegen, welche Mitglieder exponiert werden sollen (show)

Wenn Sie nur bestimmte Mixins oder Funktionen exponieren möchten, verwenden Sie show. Indem Sie beschränken, was exponiert wird, können Sie den Zweck des Moduls und die Absicht des Designs klarstellen.

1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;

• Indem Sie show auf diese Weise verwenden, wird auf einen Blick klar, welche APIs offiziell verfügbar sind.

@forward kann nicht alleine verwendet werden

Ein wichtiger Punkt ist, dass Variablen, die mit @forward weitergegeben werden, nicht innerhalb derselben Datei verwendet werden können.

1@forward "variables";
2
3.test {
4  color: $primary-color; // Error
5}

• @forward ist nur zum Weitergeben da; das 'Verwenden' ist die Aufgabe von @use.

Ein Beispiel für eine sinnvolle Arbeitsteilung

Im Moduldseign für Sass ist es ideal, die öffentliche Ebene (API) klar von der Implementierungsebene zu trennen. @forward definiert die öffentliche API, und @use verwendet sie auf der Implementierungsseite.

1// _index.scss (public API)
2@forward "variables";
3@forward "mixins";

1// _component.scss
2// Consume the public API of the foundation layer
3@use "foundation";
4
5.card {
6  color: foundation.$primary-color;
7}

• Mit dieser Struktur ist klar erkennbar, welche Teile öffentlich und welche intern implementiert sind, was zu besserer Design-Transparenz führt.

Der grundlegende Unterschied zu @import

@import fügt alle importierten Definitionen dem globalen Geltungsbereich hinzu. Andererseits stellen @use und @forward Elemente gezielt bereit und greifen über Namespaces darauf zu.

 1// @import (deprecated)
 2// Everything is injected into the global scope
 3$color: red;
 4
 5.button-import {
 6  color: $color;
 7}
 8
 9// @use + @forward (recommended)
10// Access values explicitly through a namespace
11@use "foundation";
12
13.button-use {
14  color: foundation.$primary-color;
15}

• Aufgrund dieses Unterschieds können Sie die Wartbarkeit und Sicherheit erheblich verbessern, da unbeabsichtigte Überschreibungen und Abhängigkeitsverwechslungen verhindert werden.

Zusammenfassung

@forward ist eine wichtige Funktion zur Unterstützung eines gut wartbaren Designs. Wenn Sie sorgfältig entscheiden, 'was exponiert und was als interne Implementierung versteckt wird', wird Ihre Struktur sicherer und besser lesbar. Mit dem korrekten Einsatz von @use und @forward können Sie Abhängigkeiten klar darstellen und ein gegen Änderungen robustes Design erreichen.

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