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

SASS – פונקציות

רן בר-זיק פברואר 10, 2013 8:48 am אין תגובות

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

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

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

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

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