LESS Mixin

במאמר הקודם למדנו על משתנים ב-LESS, במאמר הזה אנו נלמד על mixin ב-LESS.

mixin זה שם מסובך למשהו מאד מאד פשוט – פונקציות. חלק מכם עכשיו בטח מתמרמרים: “מה?!? למה צריך את הקקה הזה ועוד ב-CSS?!?”. הסיבה היא פשוטה מאד, שימוש ב-mixin מאפשר לנו לחלק את הקוד שלנו לתבניות. כולנו מכירים את התבניות האלו שמופיעות שוב ושוב ב-CSS. עוד פעם הבלוק הזה שיש לו Margin של עשרים פיקסלים וטקסט שחור בתוכו. שוב ושוב במקום לכתוב את מגילת אסתר השניה, ב-LESS אנחנו יכולים לקרוא לפונקציות יעודיות.

מסובך? ממש לא. שימו לב לדוגמה הבאה:

.my-wonderfull-mixin {
	margin: 10px;
	color: green;

}

.whatever {
	.my-wonderfull-mixin
}

זה יקומפל אל:

.my-wonderfull-mixin {
  margin: 10px;
  color: green;
}
.whatever {
  margin: 10px;
  color: green;
}

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

אפשר להוסיף כמובן גם משתנים ל-mixin

@var: 10px;

.my-wonderfull-mixin {
	margin: @var;
	color: green;
}

.whatever {
	.my-wonderfull-mixin
}

וזה יקומפל כרגיל.

ממש פשוט ונעים, לא? הרבה יותר נוח מחזרה אינסופית ומתישה של קוד, לא?

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

.my-wonderfull-mixin () {
	margin: 10px;
	color: green;

}

.whatever {
	.my-wonderfull-mixin
}

הקימפול יהיה כרגיל, אבל אנו לא נראה את .my-wonderfull-mixin ב-CSS המקומפל.

במאמר הבא אנחנו נדבר על LESS mixin with variables! ופה העסק ממש מתחיל להתחמם!