Den `@forward` i SASS

Denne artikkelen forklarer om @forward i SASS.

Vi skal forklare @forward på en lettfattelig måte, inkludert praktiske eksempler.

YouTube Video

Den @forward i SASS

Hva er @forward?

I SASS sitt modulsystem bruker du @use og @forward i stedet for @import. @forward er en viktig funksjon for å holde arkitekturen din ryddig. Det er en direktiv som brukes til å 'eksponere' variabler, mikser og funksjoner definert i andre filer. I stedet for å bruke det alene, fungerer det som et inngangspunkt som spesifiserer, 'Bruk dette modulen herfra.'.

1@forward "variables";

• Denne koden betyr 'gjøre innholdet i variables.scss tilgjengelig for bruk fra andre filer.'.

Forskjellen mellom @use og @forward

@use og @forward er begge syntakser for å håndtere moduler, men formålet deres er tydelig forskjellige. @use er en direktiv for å bruke elementer innenfor filen, og @forward er en direktiv for å gjøre elementer tilgjengelig 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 representerer avhengighetene som er nødvendige for implementeringen av den nåværende filen, mens @forward får filen til å fungere som et offentlig API-inngangspunkt. Å forstå denne forskjellen vil hjelpe deg å avgjøre hvor du skal bruke @forward.

Hvorfor er @forward nødvendig?

Når du legger til flere Sass-filer, må du kanskje skrive mange @use-setninger. Ved å bruke @forward kan du sentralisere alt til én enkelt inngangsfil.

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

• I denne strukturen fungerer _index.scss som det 'offentlige API-et.'.

Grunnleggende bruk av @forward

La oss se på grunnleggende bruk av @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 å bruke denne variabelen direkte med @use, grupperer du dem med @forward.

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

• På dette tidspunktet inneholder _index.scss ingenting; det er bare en reléfil.

Bruke moduler som har blitt @forwardet

I stedet for å bruke enkelte filer direkte med @use, bruker du bare indeksfilen som har gruppert @forwardene på konsumentsiden. Dette gjør at du kan bruke det som et stabilt grensesnitt uten å måtte kjenne til den interne strukturen.

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 designet, selv om plasseringen av definerte variabler eller mixins endres, kan du endre den interne strukturen uten å måtte endre kode på konsumentsiden.

Kombinere flere moduler med @forward

I faktisk utvikling er det vanlig å dele opp variabler, mikser og funksjoner etter deres roller. @forward kan skrives flere ganger, noe som gjør det mulig å samle separate moduler i én offentlig API.

Nedenfor gir vi eksempler på mikser og funksjoner og viser et design som eksponerer dem utad som et enkelt grensesnitt.

 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 å eksponere bare denne index-filen utad, kan du skjule den interne strukturen og gi et brukervennlig grensesnitt for konsumenter.

Unngå navnekonflikter (as)

Hvis de samme variabel- eller mixin-navnene er definert i flere moduler, kan du bruke as med @forward for å legge til et prefiks ved eksponering for å unngå navnekonflikter.

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

Med denne koden vil $primary-color i variables bli eksponert med følgende navn:.

1// foundation.$var-primary-color

• Denne metoden er en måte å tydelig definere designregler og skalere trygt på, og det er en essensiell teknikk, spesielt i store prosjekter eller delte biblioteker.

Skjule unødvendige medlemmer (hide)

Moduler kan inneholde variabler eller mixins kun ment for intern implementering. Ved å bruke hide kan du ekskludere dem når du videreeksponerer og hindre ekstern tilgang.

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

Med denne konfigurasjonen er $debug-color bare gyldig inne i modulen, noe som hjelper å forhindre utilsiktet bruk av konsumenter.

Spesifisere hvilke medlemmer som skal eksponeres (show)

Hvis du kun vil eksponere spesifikke mixins eller funksjoner, bruk show. Ved å begrense hva som eksponeres, kan du tydeliggjøre formålet med modulen og dens designintensjon.

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

• Ved å bruke show på denne måten, blir det tydelig ved første øyekast hvilke API-er som offisielt er tilgjengelige.

@forward kan ikke brukes alene

En viktig ting å merke seg er at variabler som er @forwardet ikke kan brukes i den samme filen.

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

• @forward er kun for 'videreeksponering,' og 'bruk' er rollen til @use.

Et eksempel på korrekt rollefordeling

I moduldesign for Sass er det ideelt å tydelig skille mellom det offentlige laget (API) og implementasjonslaget. @forward definerer det offentlige API-et, og @use bruker det fra implementasjonssiden.

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 strukturen blir det tydelig hvilke deler som er offentlige grensesnitt og hvilke som er intern implementering, noe som gir bedre designgjennomskinnelighet.

Den avgjørende forskjellen fra @import

@import utvider alle importerede definisjoner til globalt scope. På den annen side eksponerer @use og @forward elementene eksplisitt og gir tilgang via 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å grunn av denne forskjellen kan du forbedre vedlikeholdbarhet og sikkerhet betraktelig ved å hindre utilsiktet overskriving og avhengighetsforvirring.

Sammendrag

@forward er en viktig funksjon som støtter vedlikeholdbart design. Ved å være bevisst på 'hva som skal eksponeres og hva som skal skjules som intern implementering', blir stilstrukturen din sikrere og mer lesbar. Ved å bruke @use og @forward på riktig måte, kan du klargjøre avhengigheter og oppnå et design som er robust mot endringer.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video