מודולים של SASS

מאמר זה מסביר את מודולי SASS.

אנחנו מסבירים איך למודולאר את SASS באמצעות ‏‎@use‎‏ ו-‏‎@forward‎‏ ואיך לעשות שימוש חוזר במשתנים, מיקסים, פונקציות, הגדרות עיצוב ו-API ציבוריים.

YouTube Video

מודולים של SASS

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

מושגי יסוד של מודולים

מודולי SASS פותרים בעיות של זיהום שם-מרחב גלובלי ותלותות לא ברורות שהיו קיימות ב-‏‎@import‎‏ הישן. כל קובץ נטען כמודול עם מרחב שמות משלו, ורק פריטים שייוצאו במפורש זמינים לגישה מקבצים אחרים.

דוגמה למבנה קבצים

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

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• מבנה זה מקל על מִדְרוּג (modularization), בדיקה והחלפת חלקים.
• קבצים פרטיים (partials) מסומנים בקו תחתי (_) בתחילת שם הקובץ.

יסודות @use

@use טוען מודול ומספק מרחב שמות. דבר זה מונע התנגשויות שמות ומבהיר את מקור המודול.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• קובץ זה פשוט ומגדיר רק משתנים. ניתן להתייחס למשתנים שמפורסמים ממודול ישירות באמצעות @use.

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

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

קיצור או יצירת כינוי למרחב שמות

שימוש ב-as מאפשר לקצר את מרחב השמות.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• זו דוגמה לייבוא variables באמצעות הכינוי המקוצר vars. בחר שמות לפי עדיפות לקריאות או קלות ההקלדה.

הגדרת מיקסין

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

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

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

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• זוהי דוגמה לשימוש בתערובת (mixin) עם @include.

הגדרת פונקציות

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

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• קובץ זה מגדיר פונקציה שממירה ערכי פיקסל ל-rem. מוגדר גם ערך בסיס ברירת מחדל.

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• להלן דוגמה לקריאת פונקציה דרך ‏‎@use‎‏ ויישום התוצאה לסגנון.

ייצוא מודולים ו-@forward (עיצוב API)

כאשר ברצונך לחשוף מספר קבצים פנימיים כלפי חוץ, ניתן להשתמש ב-@forward ליצירת 'API ציבורי'.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• ניתן לאגד כמה קבצים פנימיים כנקודת כניסה אחת המהווה את ה-API הציבורי. כך המשתמשים יוכלו לגשת לכל הפיצ'רים הנדרשים באמצעות ייבוא נקודת כניסה אחת בלבד.

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• התוכן של variables ו-mixins נגיש ביחד באמצעות index. @forward הופך את index לשכבה הציבורית.

שליטת על ה-API עם אפשרויות show / hide של @forward

אם ברצונך לחשוף רק משתנים מסוימים, השתמש באפשרות show או hide.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• הוספת !default מאפשרת לפרסם ערך שניתן לדרוס אותו.

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• שימוש ב-show עם @forward מגביל את ה-API הציבורי לאלמנטים הנחוצים בלבד. משתנים ופונקציות לשימוש פנימי לא יהיו גלויים מבחוץ.

הפיכת מודולים למוגדרים (באמצעות with)

אם תשתמש ב-!default במודול, ניתן לדרוס ערכים באמצעות with בצד הייבוא.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• מודול עם ערכי ברירת מחדל שמוגדרים באמצעות !default יכול לקבל הגדרות דרך with.

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• שימוש ב-with בתוך @use מאפשר לדרוס משתנים ברירת מחדל בעת הייבוא. דבר זה מועיל להחלפת ערכות נושא.
• שים לב ש-with משפיע רק בזמן הייבוא ולא ניתן לשנות את הערכים הללו מאוחר יותר.

דוגמה מעשית: קומפוננטת כפתור (דוגמה שלמה)

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

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• משתנים ברירת מחדל עבור כפתורים מוגדרים כאן. שימוש ב-!default מאפשר לצרכנים לדרוס ערכים אלה.

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

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

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• סגנונות כפתור נוצרים באמצעות הפניות מרחב שמות עם @use. וריאנט מוגדר כ- .button--large.

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• ייבוא מודול button מאפשר להתחיל להשתמש בסגנונות הכפתור מידית.

החלפת ערכות נושא (באמצעות קבצי ערכת נושא מרובים)

החלפת ערכת נושא יכולה להיעשות על ידי הגדרה דרך with, או על ידי יצירת מודולים נפרדים ושינוי המודול בו משתמשים עם @use.

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

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

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• בחר ערכת נושא בשימוש ב-with או על ידי ייבוא, לדוג' @use 'themes/light' בזמן הבנייה.

פרטי וציבורי (קידומת _ ו-!default)

ב-SASS, הוספת קו תחתון בתחילת שם הקובץ מסמנת אותו כ-partial. אך כאשר מנהלים את ניראות הייצוא, השתמש ב-show ו-hide עם @forward כדי לקבוע אילו פריטים ייוצאו.

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

שיטות עבודה מומלצות לשימוש אמיתי

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

• אם המשתנים עשויים להשתנות כחלק מהערכת נושא, הוסף !default. דבר זה מקל על המשתמשים להחליף ערכים.
• יש לחלק מודולים לפי תחומי אחריות ולהתמקד במטרה אחת בלבד. הניהול הופך לקל יותר באמצעות הפרדה של משתנים, מיקסים ורכיבים.
• נהל תכנים ציבוריים עם @forward והשתמש ב-show או hide במידת הצורך. הגדרת תחום הציבורי מובילה לעיצוב בטוח יותר.
• השתמש במרחבי שמות כדי להבהיר לאיזה מודול כל פונקציה שייכת. זה מונע בלבול עם קוד אחר.
• זכור ש-with עובד רק בזמן @use. מכיוון שלא ניתן לשנותן לאחר מכן, הגדר את ההגדרות בזמן הייבוא.
• השתמש בקו תחתון בתחילת שמות הקבצים כדי להפוך אותם ל-partials, כך שהם לא יקומפלו בנפרד. כך קל יותר לשלב קבצים למבנה גדול יותר.
• הכללת דוגמאות שימוש במודול index עוזרת בבדיקות ובתיעוד. המשתמשים מבינים את ההתנהגות ביתר קלות.

שמירה על נקודות אלו תסייע לך לנהל פרויקטים גדולים ולשמור על קוד קריא בצוות.

סיכום

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

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

YouTube Video