Ang `@forward` sa SASS

Ipinaliliwanag ng artikulong ito ang tungkol sa @forward sa SASS.

Ipapaliwanag namin ang @forward sa isang madaling maintindihang paraan, kabilang ang mga praktikal na halimbawa.

YouTube Video

Ang @forward sa SASS

Ano ang @forward?

Sa module system ng SASS, ginagamit mo ang @use at @forward sa halip na @import. Ang @forward ay isang mahalagang tampok para mapanatiling maayos ang iyong arkitektura. Isa itong direktiba na ginagamit upang 'ilantad' ang mga variable, mixin, at function na na-define sa ibang mga file. Sa halip na gamitin ito mag-isa, ito ay nagsisilbing entry point na nagsasaad ng 'Gamitin ang module na ito mula rito.'.

1@forward "variables";

• Ibig sabihin ng code na ito ay 'ginagawang magagamit ang nilalaman ng variables.scss mula sa ibang mga file.'.

Pagkakaiba ng @use at @forward

@use at @forward ay parehong syntax para sa paghawak ng mga module, ngunit magkaiba talaga ang kanilang layunin. Ang @use ay direktiba para sa paggamit ng mga item sa loob ng file, at ang @forward naman ay direktiba para magamit ang mga ito sa ibang mga file.

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

• Ang @use ay kumakatawan sa mga kinakailangang dependency para sa implementasyon ng kasalukuyang file, habang ang @forward ay ginagawang public API entry point ang file. Ang pag-unawa sa pagkakaibang ito ay makakatulong sa iyong pagpapasya kung saan gagamitin ang @forward.

Bakit kailangan ang @forward?

Habang nadaragdagan ang iyong Sass files, maaaring kailangan mong magsulat ng maraming @use na statement. Sa paggamit ng @forward, maaari mong pagsamahin lahat sa isang entry file lamang.

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

• Sa estrakturang ito, ang _index.scss ang nagsisilbing 'public API.'.

Pangunahing paggamit ng @forward

Tingnan natin ang pangunahing paggamit ng @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;

• Sa halip na diretso mong @use ang variable na ito, pinag-grugrupo mo sila gamit ang @forward.

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

• Sa puntong ito, walang laman ang _index.scss; isang relay file lamang ito.

Paggamit ng mga module na na-@forward

Sa halip na @use-in direkta bawat file, ang index file lang na nag-group ng mga @forward ang iyong @use sa consumer side. Dahil dito, magagamit mo ito bilang isang stable na interface nang hindi mo kailangang alamin ang loob ng estraktura.

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}

• Sa disenyong ito, kahit magbago ang lokasyon ng mga variable o mixin, maaari mong palitan ang internal na estraktura nang hindi kinakailangan baguhin ang code sa consumer side.

Pagsasama-sama ng maraming module gamit ang @forward

Sa aktwal na development, karaniwan nang hinahati ang mga variable, mixin, at function ayon sa kanilang mga tungkulin. Maaaring isulat nang maraming beses ang @forward, na nagbibigay-daan para pagsamahin ang mga magkakahiwalay na module sa isang pampublikong API.

Sa ibaba, magbibigay kami ng mga halimbawa ng mixin at function at ipapakita ang disenyo kung paano ito ilalantad bilang isang interface.

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

• Sa pag-expose lamang ng index file na ito palabas, maitatago mo ang internal na estraktura at makakapagbigay ng user-friendly interface para sa mga consumer.

Pag-iwas sa name conflict (as)

Kapag may parehong pangalan ng variable o mixin sa maraming module, maaari kang gumamit ng as sa @forward upang magdagdag ng prefix sa pag-expose at maiwasan ang name conflict.

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

Sa code na ito, ang $primary-color sa variables ay ie-expose gamit ang ganitong pangalan:.

1// foundation.$var-primary-color

• Ang pamamaraang ito ay paraan upang malinaw na maitakda ang mga design rule at ligtas na makapag-scale, at mahalaga itong teknika lalo na sa malalaking proyekto o shared na library.

Pagtatago ng hindi kailangang member (hide)

Maaaring may mga variable o mixin ang iyong module na para lang sa internal na implementasyon. Sa paggamit ng hide, maaari mong itago ang mga ito kapag ini-expose muli at maiwasang ma-access sa labas.

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

Sa ganitong configuration, ang $debug-color ay maaaring gamitin lamang sa loob ng module, kaya hindi ito aksidenteng magagamit ng consumer.

Pagpili kung aling member ang ie-expose (show)

Kung gusto mo lang i-expose ang ilang mixin o function, gamitin ang show. Sa pamamagitan ng paglilimita ng inilalantad, mas malinaw ang layunin ng module at disenyo nito.

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

• Sa ganitong paggamit ng show, makikita agad kung alin sa mga API ang pwedeng opisyal gamitin.

Hindi magagamit mag-isa ang @forward

Mahalagang tandaan na ang mga variable na na-@forward ay hindi magagamit sa mismong file na iyon.

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

• Ang @forward ay para lang sa 'muling pag-expose,' at ang 'paggamit' ay trabaho ng @use.

Halimbawa ng tamang paghihiwalay ng mga role

Sa pagdi-disenyo ng module para sa Sass, mainam na hiwalay ang public-facing layer (API) at implementation layer. Ang @forward ang nagde-define ng public API, at ang @use ay gumagamit nito sa implementation na bahagi.

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}

• Sa ganitong estraktura, kitang-kita kung aling bahagi ang public interface at alin ang internal implementation, kaya mas malinaw ang disenyo.

Ang pinaka-pagkakaiba sa @import

Ang @import ay ginagawang global scope lahat ng imported na definition. Samantalang ang @use at @forward ay eksaktong ine-expose lang ang items at ina-access gamit ang namespace.

 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}

• Dahil sa pagkakaibang ito, mas mapabubuti ang maintainability at kaligtasan dahil naiiwasan ang hindi sinasadyang pag-overwrite at kalituhan sa dependency.

Buod

Ang @forward ay isang mahalagang tampok na sumusuporta sa maintainable na disenyo. Kapag isinasaalang-alang kung 'alin ang ie-expose at alin ang itatago bilang internal na implementasyon,' mas nagiging ligtas at madaling maintindihan ang istruktura ng iyong style. Sa tamang paggamit ng @use at @forward, mapapalino mo ang dependencies at makakamit ang disenyong matibay mula sa pagbabago.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video