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

SASS Control Directives – משפטי תנאי

רן בר-זיק ינואר 6, 2013 7:32 am אין תגובות

רוצים להרחיב את ה-mixin שלכם? למה שלא תתחילו לכתוב משפטי תנאי ב-SASS?

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

במאמר הקודם דיברנו על שימוש בארגומנטים ב-SASS mixin. במאמר הזה ניקח את ה-mixin אפילו מעט יותר רחוק ונדבר על בקרת זרימה ב-SASS. בקרת זרימה (בלעז Control Directives) זה שם מאד מאד מפוצץ לדברים שכל מתכנת משתמש בהם: משפטי תנאי ולולאות. מה שחשוב לי להבהיר ששימוש במשתני זרימה הוא באמת עניין למתכנתים. כלומר אם אתה גרפיקאי שמשתמש ב-SASS (וכל הכבוד לך על זה!), לא בטוח שתצטרך להשתמש בזה. אבל אם אתה גרפיקאי שבונה מערכת מורכבת ומבין קצת קוד, או מתכנת שבונה CSS Grid זו או אחרת שנשענת על SASS, המאמר הבא יהיה שימושי מאד עבורך. גם לאלו שנכנסים עמוק לתוך הקוד של COMPASS.

אז בואו ונדבר על משפט תנאי פשוט. תיאור המקרה – אני בונה mixin שמקבל פרמטר של גודל פונט, אם הגודל הוא גדול יותר מ-X, אז צבע הפונט יהיה שחור, אם הוא קטן יותר, אז הוא יהיה לבן. פשוט, לא? השאלה איך מממשים את זה. התשובה היא:


@mixin example($size) {
	@if $size > 10px {
		font-size: $size;
		color: black;
	} @else {
		font-size: $size;
		color: white;
	}
}

לא להבהל, זה די פשוט! קודם כל, אפשר לראות שמדובר ב-mixin רגיל עם ארגומנט אחד מהסוג שדיברנו עליו במאמר הקודם. מה שמיוחד פה הוא משפט התנאי שהוא נורא נורא פשוט – אני כותב [email protected] ואז את התנאי (במקרה הזה, הארגומנט יותר גדול מ-10px) ואז סוגריים מסולסלות שמכילות את מה שיודפס אם התנאי מתמלא. אני גם טורח לכתוב [email protected] שמיד לאחריו יש סוגריים מסולסלות שמכילות את מה שיודפס אם התנאי לא יתמלא.

הנה הדוגמה החיה – ה-mixin שלנו ושתי קריאות:


@mixin example($size) {
	@if $size > 10px {
		font-size: $size;
		color: black;
	} @else {
		font-size: $size;
		color: white;
	}
}

.foo {
  @include example($size: 5px);
}

.bar {
  @include example($size: 15px);
}

זה יקומפל אל:


.foo {
  font-size: 5px;
  color: white;
}

.bar {
  font-size: 15px;
  color: black;
}

מתכנתים מנוסים יבואו ויגידו – "רגע אחד! איך בדיוק SASS יודע ש-15px גדול יותר מ-10px???". התשובה היא ש-SASS יודעת לבצע המרות ולא חייבים להשתמש במשתנים נומריים. כן כן! אני יכול גם לצורך העניין לבצע את הקריאה הבאה:


.foo {
  @include example($size: 5px);
}

.bar {
  @include example($size: 9pt);
}


האם SASS תדע ש-9pt יותר גדול מ-10px ותדפיס את מה שצריך להדפיס? התשובה היא: כן. התוצאה של הקריאה לעיל תהיה:


.foo {
  font-size: 5px;
  color: white;
}

.bar {
  font-size: 9pt;
  color: black;
}

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

אפשר להשתמש בתנאים יותר מורכבים וב- if else לצורך העניין. למשל:


@mixin example($size) {
	@if $size >= 10px {
		font-size: $size;
		color: black;
	} @else if $size == 9px{
		font-size: $size;
		color: blue;
	}
	@else {
		font-size: $size;
		color: white;
	}
}

שימו לב שהשתמשתי כאן בelse if וגם במשפט תנאי של == ושל גדול שווה.

במאמר הבא אנו נמשיך לדון על לולאות ב-SASS.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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