LESS Mixin

שימוש ב-mixin ב-LESS מאפשר לנו לבצע חלוקה נכונה יותר של קוד ולהמנע משכפולים מיותרים של קוד ב-CSS שלנו.

במאמר הקודם למדנו על משתנים ב-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! ופה העסק ממש מתחיל להתחמם!

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

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

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

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

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

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