De `@forward` in SASS
Dit artikel legt uit over @forward in SASS.
We zullen @forward op een begrijpelijke manier uitleggen, inclusief praktische voorbeelden.
YouTube Video
De @forward in SASS
Wat is @forward?
In het module systeem van SASS gebruik je @use en @forward in plaats van @import. @forward is een belangrijke functie om je architectuur schoon te houden. Het is een directive die wordt gebruikt om variabelen, mixins en functies die in andere bestanden zijn gedefinieerd 'bloot te stellen'. In plaats van het direct te gebruiken, fungeert het als een toegangspunt dat aangeeft: 'Gebruik deze module vanaf hier.'.
1@forward "variables";- Deze code betekent dat de inhoud van
variables.scssbeschikbaar wordt gemaakt om vanuit andere bestanden te gebruiken.
Verschil tussen @use en @forward
@use en @forward zijn beide syntaxis voor het omgaan met modules, maar hun doelen zijn duidelijk verschillend. @use is een directive om elementen binnen het bestand te gebruiken, terwijl @forward een directive is om deze elementen beschikbaar te stellen voor andere bestanden.
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";@usegeeft de afhankelijkheden aan die nodig zijn voor de implementatie van het huidige bestand, terwijl@forwardhet bestand gebruikt als een publiek API-toegangspunt. Het begrijpen van dit verschil helpt je om te bepalen waar je@forwardmoet gebruiken.
Waarom is @forward nodig?
Naarmate je meer Sass-bestanden toevoegt, moet je mogelijk veel @use-statements schrijven. Met @forward kun je alles centraliseren in één enkel toegangbestand.
1styles/
2├─ foundation/
3│ ├─ _variables.scss
4│ ├─ _mixins.scss
5│ └─ _index.scss
6└─ main.scss- In deze structuur fungeert
_index.scssals de 'publieke API'.
Basisgebruik van @forward
Laten we kijken naar het basisgebruik van @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;- In plaats van deze variabele direct te
@use-en, groepeer je ze met@forward.
1// _index.scss
2@forward "variables";- Op dit moment bevat
_index.scssniets; het is simpelweg een doorgeefbestand.
Modules gebruiken die met @forward doorgegeven zijn
In plaats van individuele bestanden direct te @use-en, @use je alleen het indexbestand waar de @forward-statements zijn gegroepeerd aan de gebruikerskant. Hierdoor kun je het als een stabiele interface gebruiken zonder rekening te hoeven houden met de interne structuur.
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}- Met dit ontwerp kun je de definities van variabelen of mixins veranderen, zonder dat je code aan de gebruikerskant hoeft aan te passen.
Meerdere modules combineren met @forward
In de praktijk is het gebruikelijk om variabelen, mixins en functies op te splitsen naar hun rol. @forward kan meerdere keren worden gebruikt, waardoor je gescheiden modules kunt bundelen tot één enkele publieke API.
Hieronder geven we voorbeelden van mixins en functies en tonen we een ontwerp waarin ze als één enkele interface naar buiten worden getoond.
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";- Door alleen dit
index-bestand naar buiten toegankelijk te maken, kun je de interne structuur verbergen en een gebruiksvriendelijke interface aan consumenten bieden.
Voorkomen van naamconflicten (as)
Als dezelfde variabele- of mixinnamen in meerdere modules zijn gedefinieerd, kun je as aan @forward toevoegen om een voorvoegsel toe te voegen en naamconflicten te voorkomen.
1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;Met deze code wordt $primary-color in variables als volgt beschikbaar gesteld:.
1// foundation.$var-primary-color- Deze methode is een manier om ontwerpregels duidelijk te definiëren en veilig op te schalen; het is een essentiële techniek, vooral in grootschalige projecten of gedeelde bibliotheken.
Onnodige leden verbergen (hide)
Modules kunnen variabelen of mixins bevatten die alleen bedoeld zijn voor interne implementatie. Met hide kun je ze uitsluiten bij het opnieuw beschikbaar maken en voorkom je extern gebruik.
1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;Met deze configuratie is $debug-color alleen geldig binnen de module, wat helpt om per ongeluk gebruik door consumenten te voorkomen.
Opgeven welke leden je toegankelijk wilt maken (show)
Als je alleen bepaalde mixins of functies wilt blootstellen, gebruik dan show. Door te beperken wat er wordt blootgesteld, kun je het doel en de ontwerpintentie van de module verduidelijken.
1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;- Door
showop deze manier te gebruiken, zie je in één oogopslag welke API's officieel beschikbaar zijn voor gebruik.
@forward kan niet op zichzelf worden gebruikt
Een belangrijk punt is dat variabelen die met @forward zijn doorgegeven niet binnen dat bestand zelf gebruikt kunnen worden.
1@forward "variables";
2
3.test {
4 color: $primary-color; // Error
5}@forwardis alleen om opnieuw beschikbaar te maken; 'gebruiken' is de taak van@use.
Een voorbeeld van een juiste rolverdeling
Bij het ontwerpen van modules in Sass is het ideaal om de publieke laag (API) en de implementatielaag duidelijk te scheiden. @forward definieert de publieke API en @use gebruikt deze aan de implementatiekant.
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}- Met deze structuur wordt duidelijk welke onderdelen openbare interfaces zijn en welke intern worden geïmplementeerd, wat zorgt voor meer transparantie in het ontwerp.
Het duidelijke verschil met @import
@import plaatst alle geïmporteerde definities in de globale scope. Aan de andere kant stellen @use en @forward elementen expliciet beschikbaar en worden ze benaderd 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}- Door dit verschil kun je de onderhoudbaarheid en veiligheid sterk verbeteren door onbedoelde overschrijvingen en afhankelijkheidsverwarring te voorkomen.
Samenvatting
@forward is een belangrijke functie die een onderhoudbaar ontwerp ondersteunt. Door goed te letten op 'wat je blootstelt en wat je als interne implementatie verbergt' wordt je stijlstructuur veiliger en beter leesbaar. Door goed gebruik te maken van @use en @forward kun je afhankelijkheden duidelijk maken en een ontwerp creëren dat robuust is tegen veranderingen.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.