תגובות

מדריך: פיתוח CSS באמצעות LESS – משתנים [חלק שני]

בחלק הקודם של המדריך לפיתוח בCSS באמצעות LESS שפרסמתי בבלוג בשבוע שעבר, הסברתי מאוד בגדול מה זה LESS, למה כדאי להשתמש בזה ואיך להוסיף את האפשרות לשימוש בLESS ע"י קביעת התגיות הרלוונטיות בקובצי HTML.

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

הערה בנוגע לסינטקס

חשוב לי לציין משהו בנוגע לסינטקס של LESS לפני שאנחנו מתחילים. הסינטקס ("Syntax" – שיטת הכתיבה) של LESS זהה כמעט חלוטין לסינטקס הרגיל של CSS. במידה ותרצו לכתוב CSS רגיל במסמך LESS, אין שום בעיה – הכל יעבוד כמו שצריך למעט העובדה שמלכתחילה כל המטרה של השימוש בLESS הוא כדי לחסוך בשורות קוד ובמאמץ. כך שתיאורטית, אם תקחו קובץ CSS ישן שכתבתם ותשנו את הסיומת שלו ל"less." לא תראו שום שינוי.

CSS דינאמי בעזרת משתנים

כדי "להכריז" על משתנה בLESS נשתמש בסימן "@". בדיוק כמו שבCSS נשתמש ב"#" כדי לקרוא לID או ב"." כדי לקרוא לCLASS. מה שיגיע אחרי ה"@" יהיה שם המשתנה איתו אתם רוצים לעבוד. המשתנה עצמו יכול להכיל אותיות, מספרים, קו תחתון (_), מקף (-) וכדומה. אחרי שם המשתנה נשים נקודותיים (:) ולאחר מכן את הערך שנרצה לשמור. הערך יכול לייצג צבע מסוים, מס' ואפילו מחרוזת טקסט (String).

בואו נעיף מבט על איך זה נראה בפועל:

1
2
3
4
5
@black: #000;
@blue: blue;
@light_gray: #e7e7e7;
@dark_gray: #909090;
@basicFontSize: 12px;

לא יותר מדי מורכב. יש לי חמישה משתנים – ארבעה מהם מייצגים צבעים, האחרון מייצג את גודל הפונט הבסיסי בדף שלי. בקוד הCSS אני אשתמש במשתנים בצורה הבאה:

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
background: @dark_gray;
font-size: @basicFontSize;
}

h1 {
color: @blue;
background: @light_gray;
}

p {
color: @black;
}

הקוד הזה יתקמפל לCSS הבא:

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
background: #909090;
font-size: 12px;
}

h1 {
color: blue;
background: #e7e7e7;
}

p {
color: #000;
}

מה בעצם קורה פה? נתתי לBODY את הרקע האפור הכהה שמיוצג ע"י המשתנה dark_gray@, וקבעתי שגודל הפונט שלו יהיה 12px דרך המשתנה basicFontSize@. למה זה טוב? תחשבו לרגע שיש לכם סכמת צבעים שקיבלתם מהמעצב – צבעים שאתם חוזרים ומשתמשים בהם לאורך כל האתר. נניח שמחר המעצב מתעצבן ובוחר לשנות רק הצבע הכחול בסכמה המקורית שלו לכחול כהה יותר. במצב רגיל תצטרכו לעבור על כל הקוד ולהחליף ידנית את הצבע בכל פעם שהוא נקרא. בעזרת LESS ושימוש במשתנים תוכלו לשנות פעם אחת את הצבע – וזה ישפיע על כל הקוד!

כמו שכתבתי, בנוסף לשמירת צבעים וגדלי פונט תוכלו גם לשמור טקסטים – סטרינגים (Strings) בדיוק כמו בכל שפה אחרת. מתי משתמשים בזה? אם אתם משתמשים ב pseudo elements כמו after: או before:, תוכלו למלא את התוכן שלהם במשתנה שקבעתם. לדוגמה:

1
2
3
4
5
6
7
8
@name: "Daniel Sternlicht";

a::after {
content: @name;
position: absolute;
left: 0;
top: 0;
}

מה שתקבלו מזה יהיה:

1
2
3
4
5
6
a::after {
content: "Daniel Sternlicht";
position: absolute;
left: 0;
top: 0;
}

עד כאן להשבוע במדריך לפיתוח CSS בעזרת LESS. בחלק השלישי של המדריך אלמד על שימוש במיקסינים (Mixins) וקלאסים של LESS. המשיכו לעקוב :)

יש לכם שאלות בנוגע לLESS? תנו תגובה או השתמשו במערכת השאלות והתשובות של הבלוג.
המדריך עזר לכם? פרגנו בלייק!

קצת על דניאל שטרנליכט

דניאל שטרנליכט הוא מעצב ומפתח צד לקוח ואב לשני אייפונים מקוריים. חי ונושם ווב בעבודה ובבית, משתדל ללמוד כל יום משהו חדש עם גוגל כמורה, ו- Notepad++ כמחברת. בזמנו הפנוי תמצאו אותו מנהל את הבלוג לעיצוב גרפי וטכנולוגיה וחוקר טכנולוגיות ווב חדשות.

4 תגובות לפוסט "מדריך: פיתוח CSS באמצעות LESS – משתנים [חלק שני]"

  • אחרי שנכנסתי וקראתי בעיון וחרשתי את רוב האתר(וחירבשתי איכשהו כמה קודים כי צריך לתרגל , אנימציית CSS3 מעצבנת ) מה שיש לי להגיד הוא:
    יישר כוח על המדריך הזה והאתר הזה בכלל :)
    CSS3 וHTML5 נהפך להיות דבר אדיר עם הזמן 😀 .
    נ.ב מצאתי משהו שממיר פלאש לHTML5 אבל הוא בא בSVG :/
    מספיק חפירות, צריך לדבג PHP 😉
    שבת שלום!

  • בשורה שכתבת:
    @name = "Daniel Sternlicht";

    זה צריך להיות עם נקודתיים ולא עם שווה (=). כמו כן, זה דבר טוב גם אם רוצה בשביל ה-background להכניס איזה BASEURL או דברים כאלו.

    בהצלחה רבה.

  • פוסט מעולה !

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים