Dyrektywa `@forward` w SASS

Ten artykuł wyjaśnia, czym jest @forward w SASS.

Wyjaśnimy @forward w łatwy do zrozumienia sposób, włącznie z praktycznymi przykładami.

YouTube Video

Dyrektywa @forward w SASS

Czym jest @forward?

W systemie modułów SASS używamy @use i @forward zamiast @import. @forward to ważna funkcja pomagająca utrzymać czystą architekturę. Jest to dyrektywa używana do 'udostępniania' zmiennych, mixinów i funkcji zdefiniowanych w innych plikach. Zamiast używać jej samodzielnie, pełni rolę punktu wejścia określając: „Używaj tego modułu stąd”.

1@forward "variables";

• Ten kod oznacza „udostępnianie zawartości pliku variables.scss do użytku w innych plikach”.

Różnica między @use a @forward

@use i @forward to oba składnie do obsługi modułów, ale ich cele są wyraźnie różne. @use to dyrektywa do używania elementów w pliku, a @forward służy do udostępniania elementów innym plikom.

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 oznacza zależności konieczne do implementacji bieżącego pliku, podczas gdy @forward sprawia, że plik działa jako publiczny punkt wejścia do API. Zrozumienie tej różnicy pomoże Ci zdecydować, kiedy użyć @forward.

Dlaczego @forward jest potrzebny?

W miarę dodawania kolejnych plików Sass możesz potrzebować wielu instrukcji @use. Dzięki @forward możesz skoncentrować wszystko w jednym pliku wejściowym.

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

• W tej strukturze plik _index.scss pełni rolę „publicznego API”.

Podstawowe użycie @forward

Przyjrzyjmy się podstawowemu użyciu @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;

• Zamiast bezpośredniego użycia tej zmiennej za pomocą @use, grupujesz je poprzez @forward.

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

• Na tym etapie plik _index.scss nie zawiera nic – jest po prostu plikiem pośredniczącym.

Używanie modułów, które zostały udostępnione poprzez @forward

Zamiast bezpośrednio używać pojedynczych plików przez @use, korzystasz po stronie użytkownika tylko z pliku indeksowego, który grupuje @forward. To pozwala na korzystanie ze stabilnego interfejsu bez konieczności znajomości wewnętrznej struktury.

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}

• Dzięki takiemu projektowi, nawet jeśli zmienią się lokalizacje definicji zmiennych lub miksinów, możesz zmodyfikować strukturę wewnętrzną bez konieczności zmiany kodu po stronie użytkownika.

Łączenie wielu modułów za pomocą @forward

W praktycznym programowaniu często dzieli się zmienne, mixiny i funkcje według ich ról. @forward można stosować wielokrotnie, co umożliwia połączenie oddzielnych modułów w jedno publiczne API.

Poniżej przedstawiamy przykłady mixinów i funkcji oraz pokazujemy projekt, który udostępnia je na zewnątrz jako jeden interfejs.

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

• Udostępniając na zewnątrz tylko plik index, możesz ukryć strukturę wewnętrzną i zapewnić wygodny interfejs użytkownikom.

Zapobieganie konfliktom nazw (słowo kluczowe as)

Jeśli te same nazwy zmiennych lub miksinów są zdefiniowane w kilku modułach, możesz użyć as przy @forward, aby dodać prefiks przy udostępnianiu i zapobiec konfliktom nazw.

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

Przy tym kodzie, $primary-color z variables zostanie udostępniony pod następującą nazwą:.

1// foundation.$var-primary-color

• Ta metoda to sposób na wyraźne określanie reguł projektowania i bezpieczne skalowanie, szczególnie ważna w dużych projektach lub współdzielonych bibliotekach.

Ukrywanie niepotrzebnych elementów (hide)

Moduły mogą zawierać zmienne lub miksiny przeznaczone wyłącznie do wewnętrznej implementacji. Dzięki hide możesz je wykluczyć przy ponownym udostępnianiu i uniemożliwić dostęp do nich z zewnątrz.

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

Przy takiej konfiguracji $debug-color jest ważny tylko wewnątrz modułu, co pomaga zapobiegać przypadkowemu użyciu przez użytkowników.

Określanie, które elementy mają być udostępnione (show)

Jeśli chcesz udostępnić tylko wybrane miksiny lub funkcje, użyj show. Ograniczając to, co jest udostępniane, można wyraźnie określić cel modułu i zamysł projektu.

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

• Stosując w ten sposób show, jasno widać, które API jest oficjalnie dostępne do użycia.

@forward nie może być użyty samodzielnie

Ważną rzeczą jest, że zmienne przekazane przez @forward nie mogą być użyte w tym samym pliku.

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

• @forward służy jedynie do 'ponownego udostępniania', a do 'używania' stosuje się @use.

Przykład prawidłowego rozdzielenia ról

W projektowaniu modułów dla Sassa najlepiej jasno oddzielić warstwę publiczną (API) od warstwy implementacji. @forward definiuje publiczne API, a @use korzysta z niego po stronie implementacji.

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}

• W takiej strukturze jasno widać, które części są publicznym interfejsem, a które implementacją wewnętrzną, co poprawia przejrzystość projektu.

Kluczowa różnica względem @import

@import umieszcza wszystkie importowane definicje w globalnym zakresie. Natomiast @use i @forward wyraźnie udostępniają elementy i dają do nich dostęp przez przestrzenie nazw.

 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}

• Dzięki tej różnicy możesz znacznie poprawić utrzymywalność i bezpieczeństwo, zapobiegając niezamierzonym nadpisaniom i pomyłkom zależności.

Podsumowanie

@forward to ważna funkcja wspierająca utrzymywalność projektu. Dzięki świadomości „co udostępnić, a co ukryć jako implementację wewnętrzną”, struktura styli staje się bezpieczniejsza i bardziej czytelna. Poprawne stosowanie @use oraz @forward pozwala wyraźnie określić zależności oraz uzyskać projekt odporny na zmiany.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video