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

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