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

במאמר הקודם דיברנו על שימוש בארגומנטים ב-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 רגיל עם ארגומנט אחד מהסוג שדיברנו עליו במאמר הקודם. מה שמיוחד פה הוא משפט התנאי שהוא נורא נורא פשוט – אני כותב if@ ואז את התנאי (במקרה הזה, הארגומנט יותר גדול מ-10px) ואז סוגריים מסולסלות שמכילות את מה שיודפס אם התנאי מתמלא. אני גם טורח לכתוב else@ שמיד לאחריו יש סוגריים מסולסלות שמכילות את מה שיודפס אם התנאי לא יתמלא.

הנה הדוגמה החיה – ה-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.