רשימות ב-SASS

מאמר זה מסביר את השימוש ברשימות ב-SASS.

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

YouTube Video

רשימות ב-SASS

SASS מציעה תכונות שימושיות המזכירות תכנות, כהרחבה ל-CSS. מתוך תכונות אלו, רשימות הן כלי שימושי במיוחד להגדרת סגנונות בצורה דינמית.

מהי רשימה ב-SASS?

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

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

התכונות המרכזיות של רשימות כוללות את הנקודות הבאות:.

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

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

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

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

פלט ההידור

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}

• באמצעות הפונקציה nth() של המודול sass:list, ניתן לשחזר ערך מסוים מתוך הרשימה.

מניפולציה של רשימות

מודול sass:list מספק פונקציות למניפולציה של רשימות, מה שמקל על שליפה והוספת פריטים..

שליפת איבר: nth()

nth() היא פונקציה לשליפת איבר מרשימה.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

• בקוד זה, פונקציית nth() משמשת לקבלת הערך במיקום הנתון.

בדיקת אינדקס: index()

index() היא פונקציה שמחזירה את המיקום של איבר ברשימה.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

• בקוד הזה, index() משמש כדי למצוא שהאיבר blue הוא הפריט השלישי ברשימה.

קבלת אורך הרשימה: length()

length() היא פונקציה המחזירה את אורך הרשימה.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

• בקוד הזה, פונקציית length() משמשת לקבלת מספר הערכים ברשימה.

הוספת איבר: append()

append() היא פונקציה להוספת איברים לרשימה.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

• בקוד הזה, פונקציית append() משמשת להוספת ערך לרשימה.

החלפת איבר: set-nth()

set-nth() היא פונקציה שמחליפה את האיבר במיקום מסוים בערך אחר.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue

• בקוד הזה, set-nth() משמש להחלפת האיבר השני ב־yellow.

שילוב רשימות: join()

join() היא פונקציה שמחברת שתי רשימות.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

• בקוד הזה, join() משמש לשילוב שתי רשימות לרשימה אחת.

שיוך רשימות: zip()

zip() היא פונקציה שמקבצת מספר רשימות איבר לאיבר.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)

• בקוד הזה, zip() משמש לשיוך שמות וגילים כזוגות.

רשימות מקוננות

ניתן לקנן רשימות וכך להשתמש בהן כמערכים דו־ממדיים.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red

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

דוגמה שימושית: יצירת מעברי צבע (גרדיאנטים)

להלן דוגמה ליצירת גרדיאנטים ביעילות בעזרת רשימות.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

פלט ההידור

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

• קוד זה מהווה דוגמה ליצירת גרדיאנטים אוטומטית באמצעות רשימות ב-SCSS.

  • הצבעים לגרדיאנט מוגדרים בתוך הרשימה $colors.
  • בפונקציה gradient(), מחושב מיקום ומוקצה לכל צבע לפי מספר הצבעים, וכך נוצרת רשימה לגרדיאנט.
  • במחלקה .background, נעשה שימוש ב-linear-gradient לשילוב רשימת הצבעים שהופקה וליישום גרדיאנט אופקי.

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

המלצות וזהירות

בעת שימוש ברשימות כדאי לשים לב לנקודות הבאות:.

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

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

• ניהול רשימות מקוננות בעת עבודה עם רשימות מקוננות, עבודה מדויקת עם מדדים (אינדקסים) תסייע להימנע משגיאות.

סיום

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

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

YouTube Video