SASS – פונקציות

כך משתמשים בפונקציות המובנות ב-SASS למגוון שימושים - בתוך ה-mixin ומחוצה להם.

במאמר הקודם דיברנו על דיבוג ומציאת תקלות ב-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.

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

רינדור של קליינט סייד עם SSR

הסבר קצר על SSR מול רינדור קלאסי ולא. לא תמיד זה טוב להשתמש בו. אין כדור כסף שיכול לפתור הכל.

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

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