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

LESS Mixin

רן בר-זיק מרץ 10, 2013 8:43 am אין תגובות

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

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

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

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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