`@forward` i SASS

Den här artikeln förklarar @forward i SASS.

Vi kommer att förklara @forward på ett lättförståeligt sätt, inklusive praktiska exempel.

YouTube Video

@forward i SASS

Vad är @forward?

I SASS modulsystem använder du @use och @forward istället för @import. @forward är en viktig funktion för att hålla din arkitektur ren. Det är en direktiv som används för att 'exponera' variabler, mixins och funktioner som är definierade i andra filer. Istället för att använda det ensamt fungerar det som en ingångspunkt som anger: 'Använd den här modulen härifrån.'.

1@forward "variables";

• Den här koden innebär att innehållet i variables.scss blir tillgängligt för användning från andra filer.

Skillnaden mellan @use och @forward

@use och @forward är båda syntax för att hantera moduler, men deras syften är tydligt olika. @use är en direktiv för att använda element i filen, och @forward är en direktiv för att göra element tillgängliga för andra 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 representerar beroenden som behövs för den aktuella filens implementation, medan @forward gör att filen fungerar som en offentlig API-ingång. Att förstå denna skillnad hjälper dig att avgöra var du ska använda @forward.

Varför är @forward nödvändigt?

När du lägger till fler Sass-filer kan du behöva skriva många @use-direktiv. Genom att använda @forward kan du centralisera allt till en enda ingångsfil.

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

• I denna struktur fungerar _index.scss som den 'offentliga API'n.'.

Grundläggande användning av @forward

Låt oss titta på grundläggande användning 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;

• Istället för att direkt använda denna variabel med @use, grupperar du dem med @forward.

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

• Vid detta tillfälle innehåller _index.scss ingenting; det är bara en vidarebefordringsfil.

Användning av moduler som har @forward-ats

Istället för att direkt @use-a enskilda filer, använder du bara indexfilen som har grupperat @forward på konsumentsidan. Detta gör att du kan använda det som ett stabilt gränssnitt utan att behöva känna till den interna 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 denna design, även om platserna för variabler eller mixins ändras, kan du ändra den interna strukturen utan att modifiera någon kod på konsumentsidan.

Kombinera flera moduler med @forward

Vid faktisk utveckling är det vanligt att dela upp variabler, mixins och funktioner efter deras roller. @forward kan skrivas flera gånger, vilket gör det möjligt att samla separata moduler i ett enda publikt API.

Nedan ger vi exempel på mixins och funktioner och visar en design som exponerar dem utåt som ett enda gränssnitt.

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

• Genom att bara exponera den här index-filen utåt kan du dölja den interna strukturen och tillhandahålla ett användarvänligt gränssnitt för konsumenter.

Förhindra namnkonflikter (as)

Om samma variabel- eller mixinnamn definieras i flera moduler kan du specificera as till @forward för att lägga till ett prefix när du exponerar dem och förhindra namnkonflikter.

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

Med denna kod kommer $primary-color i variables att exponeras med följande namn:.

1// foundation.$var-primary-color

• Denna metod är ett sätt att tydligt definiera designregler och skala säkert, och det är en väsentlig teknik, särskilt i stora projekt eller delade bibliotek.

Dölja onödiga medlemmar (hide)

Moduler kan innehålla variabler eller mixins som är avsedda endast för intern implementering. Genom att använda hide kan du exkludera dem när du återexponerar och förhindra att de nås externt.

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

Med denna konfiguration är $debug-color endast tillgänglig inom modulen, vilket hjälper till att förhindra oavsiktlig användning av konsumenter.

Specificera vilka medlemmar som ska exponeras (show)

Om du bara vill exponera vissa mixins eller funktioner, använd show. Genom att begränsa vad som exponeras kan du tydliggöra syftet med modulen och dess designavsikt.

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

• Genom att använda show på detta sätt blir det uppenbart vilka API:er som officiellt är tillgängliga att använda.

@forward kan inte användas ensamt

En viktig poäng är att variabler som är @forward-ade inte kan användas inom den filen.

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

• @forward är enbart för att 'återexponera', och 'använda' är rollen för @use.

Ett exempel på korrekt rollseparering

I moduldesign för Sass är det idealiskt att tydligt separera det publika lagret (API) och implementationslagret. @forward definierar det publika API:et och @use konsumerar det från implementationssidan.

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 denna struktur blir det tydligt vilka delar som är publika gränssnitt och vilka delar som är interna implementationer, vilket leder till bättre designtydlighet.

Den avgörande skillnaden från @import

@import expanderar alla importerade definitioner till globalt omfång. Å andra sidan exponerar @use och @forward element och ger åtkomst till dem via namnrymder.

 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 av denna skillnad kan du kraftigt förbättra underhåll och säkerhet genom att förhindra oavsiktliga överskrivningar och beroenderelaterad förvirring.

Sammanfattning

@forward är en viktig funktion som stödjer underhållbar design. Genom att tänka på 'vad ska exponeras och vad ska döljas som intern implementation' blir din stilstruktur säkrare och lättare att läsa. Genom att använda @use och @forward på rätt sätt kan du tydliggöra beroenden och uppnå en design som är robust mot förändringar.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video