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

שימוש בארגומנטים ב-SASS mixin

רן בר-זיק דצמבר 30, 2012 7:56 am אין תגובות

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

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

במאמר הקודם הסברנו על SASS mixin, כאשר אנו זוכרים ש-mixin בעצם הוא השם ה-SASSי לפונקציות. במאמר הזה נראה איך אפשר להתפרע עם ה-mixin ולהכניס לתוכן ארגומנטים!

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

זוכרים את ה-example mixin שהראיתי במאמר הקודם? כך אני יוצר אותו עם ארגומנט:


@mixin example($color) {
	color: $color;
	font-size: 20px;
	font-weight: 700;
}

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


p {
  @include example(#000);
}

התוצאה תהיה כמובן:


p {
  color: black;
  font-size: 20px;
  font-weight: 700;
}

אני יכול כמובן לקרוא ל-mixin שלי ממקומות שונים עם ארגומנט שונה בכל פעם, למשל:


@mixin example($color) {
	color: $color;
	font-size: 20px;
	font-weight: 700;
}

.foo {
  @include example(#000);
}

.bar {
  @include example(#fff);
}

וזה יקומפל אל:


.foo {
  color: black;
  font-size: 20px;
  font-weight: 700;
}

.bar {
  color: white;
  font-size: 20px;
  font-weight: 700;
}

אני יכול להגדיר את ה-mixin עם ארגומנט דיפולטיבי, במידה ואני לא מכניס ארגומנט. מסובך? ממש לא! שימו לב לדוגמה הבאה:


@mixin example($color: blue) {
	color: $color;
	font-size: 20px;
	font-weight: 700;
}

.foo {
  @include example(#000);
}

.bar {
  @include example();
}

את הערך הדיפולטיבי של הארגומנט הגדרתי ב-mixin – במקרה הזה הגדרתי שהערך הדיפולטיבי של משתנה color יהיה כחול. אם אני טורח להגדיר בקריאה משתנה אחר (למשל בקריאה מתוך foo. הגדרתי צבע שחור) הערך של משתנה color יהיה שחור. אם אני לא עושה הגדרה כזו, הוא יקבל את הערך הדיפולטיבי שהוא כחול. הקוד שלעיל יקומפל אל:


.foo {
  color: black;
  font-size: 20px;
  font-weight: 700;
}

.bar {
  color: blue;
  font-size: 20px;
  font-weight: 700;
}

על מנת להגביר את הששון והשמחה, אפשר להגדיר כמה וכמה ארגומנטים ל-mixin:


@mixin example($color, $size) {
	color: $color;
	font-size: $size;
}

הקריאה ל-mixin תהיה די דומה לקריאה עם ארגומנט יחיד, שימו לב לפסיק שמפריד בין שני הארגומנטים:


.foo {
  @include example(#000, 20px);
}

התוצאה תהיה כמובן:


.foo {
  color: black;
  font-size: 20px;
}


וכמובן שאפשר להגדיר ערך דיפולטיבי לכל mixin.

עולה השאלה, מה קורה אם אני מבצע קריאה לא נכונה ל-mixin? כך למשל קורא ל-mixin שמבקש ארגומנט אבל הקריאה היא בלי ארגומנט? למשל:


@mixin example($color, $size) {
	color: $color;
	font-size: $size;
}

.foo {
  @include example();
}

התשובה היא – אני אראה את השגיאה ב-log של תוכנת scout (אם אני בסביבת חלונות) או בלוג בטרמינל (אם אני בסביבת לינוקס/מק). אבל גם אם אני אציץ בקובץ ה-CSS המקומפל, אני אוכל לראות את ההודעה על השגיאה ופירוט מדויק על השורה שבה התגלתה השגיאה:


/*
Syntax error: Mixin example is missing argument $color.
        on line 7 of N:/test/sass/input/test.scss, in `example'
        from line 7 of N:/test/sass/input/test.scss

תוכנת Scout גם מדפיסה את ההודעה על המסך אם אני מרפרש את הדף. וכך, אם לא אבהל מהודעה השגיאה, כל מה שנותר יהיה הוא לגשת אל מספר השורה ולראות מה התחרבש – במקרה הזה בשורה 7 בקובץ test.scss יש ארגומנט חסר.

וממש לסיכום, אם יש לנו mixin שיש לו כמה ארגומנטים, אנו יכולים במעמד הקריאה לבחור איזה ארגומנט לאכלס באמצעות שימוש בשמו המלא. למשל, ניקח mixin שיש לו שני ארגומנטים. אני לא חייב לקרוא לשניהם, כיוון שלשניהם מוגדר ערך דיפולטיבי, אבל נניח ואני רוצה להכניס ערך רק לארגומנט השני (או השלישי, או החמישי או העשרים אלף לצורך העניין)? אני יכול לעשות את זה באמצעות שימוש בשמו המלאה של הארגומנט. למשל:


@mixin example($color : blue, $size: 20px) {
	color: $color;
	font-size: $size;
}

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

הקוד הזה יקומפל אל:


.foo {
  color: blue;
  font-size: 30px;
}

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

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

במאמר הבא נדבר על בקרת זרימה (flow control) בקוד 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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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