LESS – משתנים

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