הפונקציה `if` ב-SASS

מאמר זה מסביר את הפונקציה if ב-SASS.

נעבור צעד-אחר-צעד מהבסיס של הפונקציה if ועד לטכניקות מתקדמות.

YouTube Video

הפונקציה if ב-SASS

הפונקציה if() היא פונקציית תנאי פשוטה ש-SASS מספקת, המחזירה אחד משני ערכים על בסיס תנאי בוליאני. היא דומה לאופרטור השלישוני של JavaScript.

תחביר

התחביר הוא כך:.

1// if(condition, trueValue, falseValue)

• אם condition הוא true, מוחזר trueValue; אם הוא false, מוחזר falseValue.

שימוש בסיסי

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

קוד דוגמה

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}

• אם המשתנה $theme הוא "dark", הרקע יהיה שחור עם טקסט לבן; אם הוא "light", הרקע יהיה לבן עם טקסט שחור.

ה-CSS שנוצר

1body {
2  background-color: black;
3  color: white;
4}

• מאחר שהמשתנה $theme הוא "dark", הרקע שחור עם טקסט לבן.

ההבדלים בין הוראת @if לבין הפונקציה if()

Sass מספקת הוראת @if ופונקציה if() לצורך הסתעפות מותנית, אך הן משמשות למטרות שונות.

קוד דוגמה

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}

• הוראת @if שולטת באיזה קוד יופק בזמן ההידור של Sass.
• לעומת זאת, הפונקציה if() מחזירה ערך ומשמשת להחלפת ערכים באופן דינמי בתוך ביטויים.

ה-CSS שנוצר

1body {
2  background-color: black;
3  color: white;
4}

• בדוגמה זו, מאחר ש-$theme הוא "dark", מוחלים רקע שחור וצבע טקסט לבן.
• שני ההבדלים העיקריים הם שהוראת @if שולטת במבנה, ואילו הפונקציה if() מחזירה ערך.

שימוש בפונקציות if מקוננות

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

קוד דוגמה

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}

• אם $theme הוא "dark" יוחזר שחור; אם "light" יוחזר לבן; אחרת יוחזר ערך ברירת המחדל ($custom-color).

ה-CSS שנוצר

1body {
2  background-color: blue;
3}

• מאחר שהמשתנה $theme הוא custom, צבע הרקע הוא כחול.

מקרי שימוש מעשיים

החלפת ערכת עיצוב

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

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}

• הקוד הבא הוא דוגמת תנאי ב-SASS שמחליפה את צבעי הרקע, הטקסט והמסגרת של כפתור לפי ערכו של המשתנה $theme. הפונקציה if() משמשת להגדרה דינמית של סגנונות עבור ערכות עיצוב כהות ובהירות.

ה-CSS שנוצר

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}

• באמצעות החלפת הערכה ניתן לשנות באופן אחיד את העיצוב הכולל.

דוגמה מתקדמת: קביעת ניגודיות צבעים באופן דינמי

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

קוד דוגמה

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}

• הפונקציה color.channel() משמשת לקבלת בהירות צבע הרקע (lightness). אם ערך זה גדול מ-50%, ייבחר שחור; אם הוא קטן יותר, ייבחר לבן כצבע הטקסט, וכך יתבצע מיטוב אוטומטי של הניגודיות מול הרקע.

ה-CSS שנוצר

1body {
2  background-color: #000;
3  color: white;
4}

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

שילוב עם @function

שימוש ב-if בתוך @function מאפשר עיצוב סגנונות גמיש אף יותר.

קוד דוגמה

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}

• הקוד מדגים שימוש ב-if() בתוך @function כדי להחזיר צבעים מתאימים על סמך ערכת העיצוב וסוג הצבע. דבר זה מאפשר עיצוב סגנונות עקבי ובר-שימוש חוזר לכל ערכה.

ה-CSS שנוצר

1body {
2  background-color: black;
3  color: white;
4}

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

הערות

1. לא ניתן להשתמש בפונקציה if עם ערכים דינמיים מכיוון ש-CSS עצמו הוא שפה סטטית, הפונקציה if קובעת ערכים בזמן הקומפילציה של SASS. לתנאים בזמן ריצה יש להשתמש ב-JavaScript.

2. תעדפו קריאות מכיוון שפונקציות if מקוננות עלולות להפוך למורכבות ולפגוע בקריאות, ניתן להשתמש ב-@mixin וב-@function של SASS לפי הצורך כדי לארגן את הקוד שלך.

סיום

הפונקציה if של SASS היא כלי חזק שמחזיר ערכים שונים בהתאם לתנאים. היא שימושית לא רק לתנאים פשוטים, אלא גם בתרחישים רבים כמו החלפת ערכה והגדרות סגנון דינמיות. עם זאת, בעת התמודדות עם תנאים מורכבים, שימו לב לקריאות והיעזרו ב-@mixin ו-@function כדי לשפר את התחזוקתיות.

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

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

YouTube Video