אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » SASS » SASS Control Directives – לולאות

SASS Control Directives – לולאות

רן בר-זיק ינואר 13, 2013 8:07 am אין תגובות

לולאות מסוגים שונים ואיטרציות שמסוגלים לסייע לנו ביצירת mixin מתקדמים במיוחד

»SASS Control Directives – משפטי תנאי
»ייבוא עם SASS
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר הקודם דיברנו על משפטי תנאי ב-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 @.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
SASS

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד