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

LESS – משתנים

רן בר-זיק מרץ 3, 2013 7:47 am אין תגובות

כך משתמשים במשתנים ב-LESS. המטא-שפה המהפכנית של CSS.

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

במאמר הקודם למדנו על התקנת סביבת העבודה שתאפשר לנו לעבוד עם LESS. כתבתי שם שאני לא תומך בקימפול בזמן אמת של קובץ LESS לקובץ CSS. במאמר הזה אני יוצא מנקודת הנחה שאתם כבר יצרתם סביבת עבודה ומסוגלים לקמפל את קובץ ה-LESS לקובץ CSS רגיל והקימפול נעשה רק בזמן שאתם משנים את קובץ ה-LESS.

בואו ונדבר על משתנים. למה בדיוק צריך משתנים ב-CSS מעפן? אתם בטח שואלים את עצמכם. אבל האמת היא שזה אחד הדברים החזקים שיש ב-LESS. בואו ונסתכל על קטע קוד פשוט ב-CSS לדוגמה:


.whatever {
  color: #ffffff;
}
.me {
  margin: 10px;
  color: #ffffff;
}
.metoo {
  margin: 12px;
  color: #ffffff;
}

אפשר לראות איך שוב ושוב אנחנו משכפלים את קטע הקוד שמגדיר לנו את הצבע. וכל מי שעבד, ולו רק באופן שטחי, עם CSS, יודע שהשכפולים האלו בלתי נמנעים. ואם צריך לשנות צבע? אללה יסתור. לעשות Search replace ולהתפלל שאתה לא דורס משהו חשוב. שימו לב לקוד הבא ב-LESS:


@color: #fff;

.whatever {
	color: @color;
}

.me {
	margin: 10px;
	color: @color;
}

.metoo {
	margin: 12px;
	color: @color;
}

מיד כשהקוד הזה יקומפל, הוא יקומפל ל-CSS שראינו לעיל. מה ההבדל? ההבדל הוא שאני יכול לשנות את הצבע רק בנקודה אחת! בנקודה שבה אני מגדיר אותו ואז הוא ישתנה בכל המקומות באופן אוטומטי. בלי Search replace במיליון קבצים, בלי לפחד לדרוס משהו – פשוט, אלגנטי, קל.

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


@some-var: 12px 10px 13px 4px;

.whatever {
	margin: @some-var;
}


וזה יקומפל כמובן אל:


.whatever {
  margin: 12px 10px 13px 4px;
}

אפשר להכניס גם טקסט לתוך משתנים, אם אתם ממש רוצים:


@some-var: "Hello World!";

.whatever {
	content: @some-var;
}

זה יקומפל אל:


.whatever {
  content: "Hello World!";
}

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


@some-var: 2px;

.whatever {
	margin: @some-var*2;
}

בטח תבואו ותשאלו את עצמכם – בשביל מה בדיוק אנחנו צריכים פעולות כפל או חילוק במשתנים שלנו? מה עשינו רע? אני אדגים באמצעות משהו מאד מאד פשוט:


@some-var: 2px;

.big {
	margin: @some-var*2;
}

.regular {
	margin: @some-var;
}

.small {
	margin: @some-var/2;
}

זה יקומפל אל:


.big {
  margin: 4px;
}
.regular {
  margin: 2px;
}
.small {
  margin: 1px;
}

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

LESS הוא מאד חכם, ויכול לעשות גם המרות בין גדלים שונים. למשל:


@some-var: 2px;

.whatever {
	margin: @some-var + 3;
}

זה יקומפל אל:


.whatever {
  margin: 5px;
}

אפשר להשתמש באריתמטיקה מורכבת באמצעות סוגריים (עגולות) באופן הבא:


@some-var: 2px;

.whatever {
	margin: ((@some-var + 5) * 2);
}

זה יקומפל אל:


.whatever {
  margin: 14px;
}


אני ממליץ מאד להוסיף תמיד סוגריים סביב כל החישובים האריתמטיים.

אני בדרך כלל לא אוהב לדבר על דברים לא שימושיים, אבל זה משהו שחייבים לדעת. אם אתם אנשים של ת'כלס, אתם יכולים לדלג אל המאמר הבא. כל השאר יהנו מללמוד על כך שב-LESS יש variable variables – מה הדבר הנפלא הזה אומר? שימו לב לדוגמה הבאה:


@some-var: 2px;

@moshe: 'some-var';

.whatever {
	margin: @@moshe;
}


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


.whatever {
  margin: 2px;
}

אני לא הולך להכנס למה צריך את זה בכלל (לפי דעתי, מדובר בפיצ'ר מיותר לחלוטין), אבל טוב לדעת שזה שם.

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

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

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