איטרציה ב-SASS

מאמר זה מסביר כיצד לטפל באיטרציה ב-SASS.

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

YouTube Video

איטרציה ב-SASS

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

סיבות להשתמש באיטרציה ב-SASS

ישנם מספר יתרונות בשימוש באיטרציה, כגון:.

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

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

תחביר לאיטרציה ב-SASS

התחביר העיקרי לאיטרציה ב-SASS הוא:.

• באמצעות @for, ניתן לבצע איטרציה על טווח מסוים של מספרים.
• באמצעות @each, ניתן לבצע לולאה על רשימות או מפות.
• באמצעות @while, ניתן לבצע לולאה עד שמתקיים תנאי מסוים.

איטרציה באמצעות @for

@for מבצע תהליך חוזר בהתבסס על טווח מספרים שנקבע.

תחביר

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/

• יש לציין ערכי התחלה וסיום עבור <start> ו-<end>. השימוש ב-to מדלג על ערך הסיום, ו-through כולל אותו.

דוגמה

הקוד הבא יוצר אוטומטית מחלקות עם רוחב מסגרת (border) שגדל ב-1px בכל פעם.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}

• קוד זה יוצר מחלקות לרוחבי מסגרת (עובי border) שמתווספים ב-1px בכל פעם. כאן, ההוראה @for מבצעת לולאה מ-1 עד 5.

CSS שנוצר

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

• מחלקות מ-.border-1 ועד ל-.border-5 יווצרו ברצף, כאשר כל מסגרת עבה ב-1px מהקודמת.

איטרציה באמצעות @each

@each מבצע לולאה על רשימות או מפות. זה שימושי כאשר רוצים ליצור מחלקות בתבנית יעילה.

תחביר

1/*
2@each $item in <list> {
3  ...
4}
5*/

דוגמה 1: שימוש ברשימה

הקוד הבא יוצר מספר מחלקות לצבע טקסט.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}

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

CSS שנוצר

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}

• כאשר מקמפלים את קובץ ה-SASS ל-CSS, מחלקות כגון .text-red, .text-blue ו-.text-green נוצרות עבור כל צבע ברשימה.

דוגמה 2: שימוש במפה

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

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

CSS שנוצר

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}

• כאשר מקמפלים את קובץ ה-SASS ל-CSS, מחלקות כמו .bg-primary, .bg-success ו-.bg-danger נוצרות לכל מפתח במפה.

איטרציה באמצעות @while

@while ממשיכה את הלולאה כל עוד התנאי מתקיים.

תחביר

1/*
2@while <condition> {
3  ...
4}
5*/

דוגמה

לדוגמה, אם ברצונך להגדיל את גודל הגופן בשלבים, אפשר לכתוב כך:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}

• ניתן להשתמש בהוראת @while לעיבוד איטרטיבי כשהגדלים של הגופן עולים בשלבים. בעזרת המשתנה $i, מחלקות נוצרות אוטומטית לערכים מ-1 עד 5.

CSS שנוצר

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}

• כאשר מקמפלים את קובץ ה-SASS ל-CSS, מחלקות עם גודל גופן מ-1rem עד 5rem נוצרות אוטומטית.

דוגמה מתקדמת: שילוב איטרציה והטמעה (nesting)

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

דוגמה

להלן דוגמה בה צבעי רקע וצבעי hover עבור כפתורים מוגדרים יחד.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}

• על ידי שילוב של איטרציה וקינון ב-SASS, ניתן ליצור בצעד אחד את צבעי הרקע וכפתורי הריחוף לכל הכפתורים. עבור כל צבע במפה נוצרת מחלקה של ‎.btn-‎ והסגנון של ‎:hover‎ מוגדר באמצעות קינון.

CSS שנוצר

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}

• כאשר אתה ממיר את קובץ ה־SASS ל־CSS, צבע הרקע וצבע ההובר של כל כפתור נוצרים באופן אוטומטי, וסגנונות ה-:hover מוגדרים יחד באמצעות קִינּוּן (nesting).

נקודות חשובות בעת שימוש באיטרציה

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

1. הימנעו מהטמעה (nesting) עמוקה מדי הטמעה עמוקה פוגעת בקריאות הקוד, לכן יש להמעיט בה למינימום הנדרש.

2. שקול את השפעות הביצועים אם נוצרות יותר מדי מחלקות כתוצאה מאיטרציה, קובץ ה-CSS שלך עלול להיות גדול מדי וללא צורך.

3. השתמש בשמות משתנים הולמים עבור משתנים כמו $i או $item, השתמש בשמות משמעותיים כדי להקל על הבנת הקוד.

סיכום

שימוש באיטרציה ב-SASS מאפשר עיצוב סגנון יעיל וקל לתחזוקה. במיוחד, הבחירה בין @for, @each ו-@while מאפשרת ליצור CSS דינאמי וגמיש.

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

YouTube Video