SASS – פונקציות

במאמר הקודם דיברנו על דיבוג ומציאת תקלות ב-SASS. במאמר הזה אנו נדבר על פונקציות ב-SASS. בניגוד ל-mixin, שאותן אנו יכולים לכתוב בעצמנו או לייבא ממקומות אחרים, הפונקציות ב-SASS מגיעות מקובץ של רובי. רובי (Ruby) למי שלא יודע זו שפת התכנות ש-SASS כתובה בה. הפונקציות נכתבות ממש בקוד רובי ונכנסו לקוד של SASS. יש כמה וכמה פונקציות כאלו והן מאד מאד שימושיות.

רשימת הפונקציות המלאה נמצאת בדף הזה בדוקומנטציה של SASS.

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

בואו ונדגים, בדוקומנטציה, אפשר לראות שיש לי פונקציה מהסוג הזה:

max($x1, $x2, …)
Finds the maximum of several values.

הפונקציה הזו מקבלת כמה ערכים ומחזירה את הערך הגבוה. איך משתמשים בה? שימו לב ל-mixin הבא שלי:

@mixin example-mixin($x, $y) {
	$big-size: max($x, $y);
	font-size: $big-size;
}

ה-mixin הוא מאד פשוט, הוא מקבל שני פרמטרים, בודק באמצעות פונקצית max מה הכי גדול ומכניס אותם למשתנה בשם big-size ואותו הוא מחזיר כ-font-size. את ה-mixin אני אפעיל עם משהו כזה:

a {
	@include example-mixin(10px, 20px);
}

התוצאה תהיה משהו כזה:

a {
  font-size: 20px;
}

ההבדל בין mixin לפונקציות הוא גם באופן הקריאה שלהן – אני קורא לפונקציה בצורה שונה לגמרי מ-mixin. אני לא חייב לקרוא לה ממ-mixin בלבד! הנה למשל קוד שבו אני מגדיר צבע ל-a ומגדיר שאם הפסאודו קלאס hover מופעל, הצבע שהגדרתי יהיה כהה יותר בעשרים אחוז:

a {
	color: blue;
	&:hover {
		color: darken(blue, 20%);
	}
}

התוצאה של זה תהיה:

a {
  color: blue;
}

a:hover {
  color: #000099;
}

הפונקציות כאמור הן שימושיות מאד, ולא רק ל-mixin. שווה מאד לעבור על החלק המתאים בדוקומנטציה (הלינק שפורסם לעיל) ולהכיר את המספר הרב של הפונקציות שיש שם – פונקציות שימושיות מאד ורבות כוח, כיוון שהן לא כתובות ב-SASS אלא ברובי.

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