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

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (1 הצבעות, ממוצע: 5.00 מתוך 5)

תגיות: פורסם בקטגוריה: LESS

אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.

מאמרים אחרונים