“@forward” i SASS

Denne artikel forklarer om “@forward” i SASS.

Vi vil forklare @forward på en letforståelig måde, inklusive praktiske eksempler.

YouTube Video

“@forward” i SASS

Hvad er “@forward”?

I SASS’ modul-system bruger du “@use” og “@forward” i stedet for “@import”. @forward er en vigtig funktion for at holde din arkitektur ren. Det er en direktiv, der bruges til at 'eksponere' variabler, mixins og funktioner, der er defineret i andre filer. Den bruges ikke alene, men fungerer som et indgangspunkt, der angiver: 'Brug dette modul herfra.'.

1@forward "variables";

• Denne kode betyder: 'gør indholdet af variables.scss tilgængeligt for brug fra andre filer.'.

Forskel mellem “@use” og “@forward”

“@use” og “@forward” er begge syntakser til at håndtere moduler, men deres formål er klart forskellige. “@use” er en direktiv til at bruge ting inden for filen, og “@forward” er en direktiv til at gøre ting tilgængelige for andre filer.

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” repræsenterer de afhængigheder, der er nødvendige for den aktuelle fils implementering, mens “@forward” får filen til at fungere som et offentligt API-indgangspunkt. Hvis du forstår denne forskel, kan du afgøre, hvor du skal bruge “@forward”.

Hvorfor er “@forward” nødvendig?

Når du tilføjer flere Sass-filer, kan du få brug for at skrive mange “@use”-udsagn. Ved at bruge “@forward” kan du samle alt i en enkelt indgangsfil.

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

• I denne struktur fungerer _index.scss som det 'offentlige API.'.

Grundlæggende brug af “@forward”

Lad os se på den grundlæggende brug af “@forward”.

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;

• I stedet for at bruge denne variabel direkte med “@use”, grupperer du dem med “@forward”.

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

• På dette tidspunkt indeholder _index.scss intet; det er simpelthen en relæfil.

Brug af moduler, der er blevet “@forward”’et

I stedet for at bruge hver enkelt fil direkte med “@use”, bruger du kun indeks-filen, som har samlet “@forward”'erne på forbruger-siden. Dette gør det muligt at bruge det som et stabilt interface uden at skulle kende til den interne struktur.

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}

• Med dette design kan du, selv hvis definitionerne af variable eller mixins ændrer placering, ændre den interne struktur uden at skulle redigere kode på forbruger-siden.

Kombinering af flere moduler med “@forward”

I faktisk udvikling er det almindeligt at opdele variabler, mixins og funktioner efter deres roller. @forward kan skrives flere gange, hvilket gør det muligt at samle adskilte moduler i et enkelt offentligt API.

Nedenfor giver vi eksempler på mixins og funktioner og viser et design, der eksponerer dem udadtil som en samlet grænseflade.

 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";

• Ved kun at eksponere denne index-fil udadtil kan du skjule den interne struktur og give forbrugerne et brugervenligt interface.

Forebyggelse af navngivningskonflikter (“as”)

Hvis de samme navne på variable eller mixins er defineret i flere moduler, kan du angive “as” til “@forward” for at tilføje et præfiks ved eksponeringen og dermed undgå navnekonflikter.

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

Med denne kode vil $primary-color i variables blive eksponeret med følgende navn:.

1// foundation.$var-primary-color

• Denne metode er en måde at tydeligt definere designregler og skalere sikkert, og det er en essentiel teknik, især i større projekter eller delte biblioteker.

Skjul unødvendige medlemmer (“hide”)

Moduler kan indeholde variable eller mixins, der udelukkende er beregnet til intern implementering. Ved at bruge “hide” kan du udelukke dem ved gen-eksponering og forhindre adgang udefra.

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

Med denne konfiguration er $debug-color kun gyldig inde i modulet, hvilket hjælper med at forhindre utilsigtet brug af forbrugere.

Angivelse af hvilke medlemmer der skal eksponeres (“show”)

Hvis du ønsker kun at eksponere bestemte mixins eller funktioner, skal du bruge “show”. Ved at begrænse, hvad der eksponeres, kan du tydeliggøre formålet med modulet og dets designintention.

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

• Ved at bruge “show” på denne måde, er det tydeligt, hvilke API'er der officielt er tilgængelige.

“@forward” kan ikke bruges alene

Et vigtigt punkt er, at variable som “@forward”'es ikke kan bruges i denne fil.

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

• “@forward” er kun til “gen-eksponering”; 'brug' er rollen for “@use”.

Et eksempel på korrekt rolleopdeling

I moduldesign for Sass er det ideelt at adskille det offentlige lag (API) og implementeringslaget tydeligt. “@forward” definerer det offentlige API, og “@use” forbruger det fra implementeringssiden.

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}

• Med denne struktur bliver det klart hvilke dele der er offentlige interfaces og hvilke der er interne implementeringer, hvilket fører til bedre designgennemsigtighed.

Den afgørende forskel fra “@import”

“@import” udvider alle importerede definitioner til globalt scope. Modsat eksponerer “@use” og “@forward” elementer eksplicit og tilgås gennem namespaces.

 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}

• På grund af denne forskel kan du væsentligt forbedre vedligeholdelse og sikkerhed ved at forhindre utilsigtede overskrivninger og afhængighedsforvirring.

Sammendrag

“@forward” er en vigtig funktion, der støtter vedligeholdelsesvenligt design. Ved at være opmærksom på 'hvad der skal eksponeres, og hvad der skal skjules som intern implementering', bliver din stilstruktur sikrere og mere læsbar. Ved korrekt brug af “@use” og “@forward” kan du tydeliggøre afhængigheder og opnå et design, der er robust overfor ændringer.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video