‏ה־@forward ב־SASS

מאמר זה מסביר על ‏ה־@forward ב־SASS.

נסביר את @forward בצורה ברורה וקלה להבנה, כולל דוגמאות מעשיות.

YouTube Video

‏ה־@forward ב־SASS

מהו ‏@forward?

במערכת המודולים של SASS, משתמשים ב־@use ו־@forward במקום ב־@import. @forward היא תכונה חשובה לשמירה על מבנה קוד מסודר. זו הוראה המשמשת ל'החשפה' של משתנים, מיקסים ופונקציות שמוגדרים בקבצים אחרים. במקום להשתמש בו בפני עצמו, הוא משמש כנקודת כניסה שאומרת: 'השתמשו במודול הזה דרך כאן.'.

1@forward "variables";

• הקוד הזה אומר: 'להפוך את התוכן של variables.scss לזמין לשימוש מקבצים אחרים.'.

ההבדל בין ‏@use ל־@forward

@use ו־@forward אלה שניהם תחביר לעבודה עם מודולים, אבל המטרות שלהם שונות בבירור. @use היא הוראה לשימוש בפריטים בתוך הקובץ, ו־@forward היא הוראה לחשיפה שלהם לקבצים אחרים.

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 מייצג את התלויות הנחוצות למימוש של הקובץ הנוכחי, ואילו ‏@forward הופך את הקובץ עצמו ל־נקודת כניסה ל־API ציבורי. הבנה של ההבדל הזה תעזור להחליט איפה להשתמש ב־@forward.

מדוע ‏@forward הכרחי?

כשאתם מוסיפים עוד קבצי Sass, ייתכן שתצטרכו לכתוב הרבה פקודות @use. השימוש ב־@forward מאפשר לרכז הכול בקובץ כניסה אחד.

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

• במבנה הזה, _index.scss משמש כ־'API ציבורי'.

שימוש בסיסי ב־@forward

בואו נבחן את השימוש הבסיסי ב־@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;

• במקום להשתמש ישירות במשתנה הזה עם ‏@use, אתם מקבצים אותם בעזרת ‏@forward.

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

• בשלב זה, _index.scss אינו מכיל כלום; הוא רק קובץ מעבר.

שימוש במודולים שחושפו עם ‏@forward

במקום להשתמש ישירות ב־@use בקבצים הבודדים, בצד הצרכן משתמשים רק בקובץ ה־index הכולל את כל ה־@forwardים. כך ניתן להשתמש בו כממשק יציב מבלי להכיר את המבנה הפנימי.

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}

• עם עיצוב כזה, גם אם מיקומי ההגדרה של משתנים או mixins משתנים, ניתן להחליף את המבנה הפנימי מבלי לשנות קוד בצד הצרכן.

שילוב מספר מודולים בעזרת ‏@forward

בפיתוח בפועל, נהוג להפריד משתנים, מיקסים ופונקציות לפי התפקידים שלהם. @forward ניתן לכתוב מספר פעמים, מה שמאפשר לאגד מודולים נפרדים לממשק API ציבורי אחד.

להלן נביא דוגמאות למיקסים ולפונקציות, ונמחיש עיצוב שמאפשר לחשוף אותם החוצה כממשק יחיד.

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

• כאשר חושפים רק את קובץ ה־index החוצה, אפשר להסתיר את המבנה הפנימי ולספק ממשק ידידותי לצרכנים.

מניעת התנגשויות שמות (‎as)

אם אותו שם משתנה או mixin מוגדר במספר מודולים, ניתן להשתמש ב־as ב־@forward כדי להוסיף קידומת ולמנוע התנגשויות שמות.

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

בעזרת קוד זה, $primary-color מתוך variables ייחשף בשם הבא:.

1// foundation.$var-primary-color

• שיטה זו היא דרך להגדיר כללי עיצוב בצורה ברורה ולהתרחב בצורה בטוחה, וזהו כלי הכרחי במיוחד בפרויקטים גדולים או ספריות משותפות.

הסתרת חברים מיותרים (‎hide)

מודולים עשויים לכלול משתנים או mixins שמיועדים רק למימוש פנימי. באמצעות hide, ניתן להחריג אותם בחשיפה מחדש ולמנוע גישה חיצונית אליהם.

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

עם הגדרה זו, $debug-color בתוקף רק בתוך המודול, ומונעת שימוש לא מכוון על ידי צרכנים.

הגדרת אילו חברים לחשוף (‎show)

אם ברצונך לחשוף רק mixins או פונקציות מסוימות, השתמש ב־show. על ידי הגבלת מה שנחשף, אפשר להבהיר את מטרת המודול ואת כוונת העיצוב שלו.

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

• בשימוש ב־show בדרך זו, ברור אילו APIs זמינים באופן רשמי לשימוש.

@forward אינו יכול לשמש בפני עצמו

נקודה חשובה היא שמשתנים שעברו ‏@forward לא ניתנים לשימוש בתוך אותו קובץ.

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

• @forward מיועד אך ורק ל־'חשיפה מחדש', ואילו ‏'שימוש' הוא התפקיד של ‏@use.

דוגמה להפרדת תפקידים נכונה

בתכנון מודולים ב־Sass, מומלץ להפריד בברור בין שכבת ה־API הציבורית לבין שכבת המימוש. @forward מגדיר את ה־API הציבורי, ו־@use צורכת אותו מצד המימוש.

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}

• עם מבנה כזה, מובן אילו חלקים מהווים ממשק ציבורי ואילו חלקים הם מימוש פנימי, מה שמוביל לשקיפות תכנונית טובה יותר.

ההבדל המהותי מול ‏@import

@import מרחיב את כל ההגדרות שיובאו אל תוך המרחב הגלובלי. לעומת זאת, ‏@use ו־@forward חושפים פריטים באופן מפורש וניגשים אליהם דרך מרחבי שמות.

 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}

• בגלל ההבדל הזה, אפשר לשפר מאוד את התחזוקה והבטיחות על ידי מניעת דריסות לא מכוונות ובלבול בתלויות.

סיכום

@forward הוא פיצ'ר מרכזי שתומך בעיצוב בר־תחזוקה. כאשר שמים לב למה לחשוף ומה להסתיר כחלק מהמימוש הפנימי, מבנה הסטייל שלך הופך לבטוח וקריא יותר. בשימוש נכון ב־@use וב־@forward, אפשר להבהיר את התלויות ולבנות עיצוב עמיד לשינויים.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video