SASS – משתנים

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

משתני SASS

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

#main {
  width: 5em;
}
#footer {
  width: 5em;
}
#header {
  width: 5em;
}

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

$width: 5em;

#main {
  width: $width;
}

#footer {
  width: $width;
}

#header {
  width: $width;
}

ואם אקמפל את הקוד הזה (אתם זוכרים שבמאמר הראשון בסדרה על ה-SASS הסברתי איך להפוך קובץ SCSS לקובץ CSS, נכון?) אני אקבל בדיוק את התוצאה הקודמת. גאוני, לא?
אני יכול להכניס מספר רב של מחרוזות לתוך משתנים:

1. טקסט
2. מספרים
3. צבעים
4. ערכים בוליאנים (שזה בת’כלס true או false)
5. רשימות – שזה בעצם טקסט

אם אתם צריכים דוגמה לרשימות (כי זה הכי מבלבל) אז הנה דוגמה טובה:

$margin: 2px 3px 4px 5px ;

#main {
  margin: $margin;
}

#footer {
  margin: $margin;
}

#header {
  margin: $margin;
}

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

$url: url("http://www.example.com/img/example.png") ;

#main {
  background-image: $url;
}

יקומפל אל:

#main {
  background-image: url("http://www.example.com/img/example.png");
}

פעולות במשתני SASS

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

במשתנים נומריים (מספרים), אפשר לבצע את כל הפעולות האריתמטיות: חיבור (+), חיסור (-), כפל (*), חילוק (/) ושארית (%).

במשתנים מבוססי טקסט אני יכול לבצע חיבור בין שני טקסטים (או שני משתנים) באמצעות הסימן +.

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

טוב, בואו ונסתכל על הקוד הבא:

$width: 10;
$regular: $width+'px';
$big: $width*1.5+'px';
$huge: $width*2+'px';

#regular {
  margin: $regular;
}

#big {
  margin: $big;
}

#huge{
  margin: $huge;
}

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

#regular {
  margin: "10px";
}

#big {
  margin: "15px";
}

#huge {
  margin: "20px";
}

כל הפעולות הנומריות תומכות בסוגריים, אגב, אם אתם ממש צריכים. רק הערה קטנה בנוגע לחילוק – ב-CSS אפשר להשתמש בסימן ‘/’ – עד כמה שאני זוכר בפונט – כך למשל font: 10px/12px אומר שגודל הפונט הוא 10px וגודל השורה (line height) הוא 12px – אז כדי להיות בטוחים שהחלוקה באמת תתבצע והוא לא ידפיס את הסימן, שימו את הביטוי בסוגריים. בכלל לשים פעולות אריתמטיות בסוגריים זה מנהג שיחסוך לכם צרות.

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