SASS Control Directives – לולאות

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

for

אז בואו ונדבר על for – לולאה שנעה על רצף של מספרים. זה מאד שימושי אם יש לנו כמה classים ממוספרים (בדיוק כמו ב-grid!) שאנו צריכים להגדיר להם פרמטרים שונים על פי המספור שלהם. בואו למשל ניצור grid פשוט של 1200 פיקסלים כאשר חלק ב-grid הוא ברוחב 100 פיקסלים. הקוד יראה כך:

.container .grid-1 {
  width: 100px;
}
.container .grid-2 {
  width: 200px;
}
.container .grid-3 {
  width: 300px;
}
.container .grid-4 {
  width: 400px;
}
.container .grid-5 {
  width: 500px;
}
.container .grid-6 {
  width: 600px;
}
.container .grid-7 {
  width: 700px;
}
.container .grid-8 {
  width: 800px;
}
.container .grid-9 {
  width: 900px;
}
.container .grid-10 {
  width: 1000px;
}
.container .grid-11 {
  width: 1100px;
}
.container .grid-12 {
  width: 1200px;
}

איך אני יוצר את הקוד הזה באמצעות SASS for? מאד פשוט! שימו לב לזה:

@mixin grid() {
	@for $i from 1 through 12 {
		.grid-#{$i} { width: $i*100+px; }
	}
}

.container {
  @include grid();
}

מה שקורה פה הוא שבתוך ה-mixin של grid אני מבצע לולאות for שנעה בין המספר 1 למספר 12. בתוך הלולאה אני יכול לגשת אל המשתנה i (שמייצג לי את המספר שכאמור הוא בין 1 ל-12). אני מדפיס אותו באמצעות #{$i} – צורת ההדפסה כאשר אני רוצה להדפיס משתנה כסלקטור (או בתוך מחרוזת טקסט) ומדפיס אותו כרגיל, כמו כל משתנה אחר, בתוך התכונה של ה-CSS – פשוט ואלגנטי. כל מה שנותר לי לעשות זה לקרוא לו מתוך הקונטיינר שלי! זה הכל!

כמובן שאפשר להרחיב את זה עוד ועוד עם משפטי תנאי, משתנים וכו' וכו'. אם באמת הייתי יוצר grid, הייתי צריך ליצור גם את ה-push וה-pull ושאר החלקים, אבל זו רק דוגמה שמראה לכם את הכוח של ה-SASS ואיך אני יכול ליצור איתו איזה grid שבא לי. אפשר כמובן לא להסתפק ב-grid אלא לעצב כל חלק ממוספר אצלי ב-CSS. אבל בסופו של דבר, משתמשים בו בעיקר ל-grid.

while

אם אנו רוצים לקחת את ה-for קדימה, אנו יכולים להשתמש ב-while. בניגוד ל-for שבו אנו מגדירים מראש כמה פעמים הוא ירוץ, ה-while רצה כל עוד תנאי מסוים מתמלא. כך למשל מימשתי את אותו ה-grid עם while:

@mixin grid() {
$i: 0;
@while $i < = 12  {
		.grid-#{$i} { width: $i*100+px; }
		$i: $i + 1;
	}
}

.container {
  @include grid();
}

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

each

לי באופן אישי יצא להשתמש בו מעט יחסית, אבל הוא קיים וחשוב אז לפיכך אדבר עליו. ב-each אנו מבצעים איטרציות על רשימות. אם אתם זוכרים, במאמר על משתני SASS דיברתי על זה שיש רשימות. למשל margin: 10px 15px 2px 3px – כל מה שבא אחר ה-margin הוא רשימה. על רשימות אנו יכולים לבצע איטרציות.

אני אתן את הדוגמה שיש בדוקומנטציה:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

שימו לב לכמה דברים מעניינים בקוד שלעיל, קודם כל, הרשימה שעליה אני עושה איטרציה היא: puma, sea-slug, egret, salamander בכל איטרציה, המשתנה הוא animal$ והוא כמובן מקבל את אחד הערכים ברשימה בכל מעבר.
אם אני מדפיס את המשתנה בסלקטור, אני משתמש ב-{המשתנה}# – סולמית וסוגריים מסולסלות. כתבתי קודם לכן שאם אני מדפיס משתנה כחלק של סלקטור/מחרוזת טקסט אני חייב חייב להשתמש בזה אחרת החירבוש יהיה מדהים. אני משתמש בזה גם ב-URL כי גם הוא חלק ממחרוזת טקסט.

הקוד שיתקבל הוא:

.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

.salamander-icon {
  background-image: url("/images/salamander.png");
}

שימוש ב-each יכול להיות שימושי בכמה מקרים – במיוחד ב-prefixes. באופן אישי – אני לא משתמש בו (אני משתמש ב-COMPASS בשביל זה) אבל נחמד לדעת שהוא קיים ושימושי במקרים מסוימים.

עד כאן בנוגע לזרימת קוד ב-SASS. במאמר הבא אנחנו נדבר על משהו שחשוב גם לגרפיקאים ולאנשים מן הישוב שמשתמשים ב-SASS וזה Rules @.