אחד האתגרים הכי גדולים בתחזוקה של CSS גדול הוא היכולת לשמור על קשר בין כללים שונים, כולל בגדלי מסך שונים. ראינו כבר איך יחידות em ו rem עוזרות לנו בהתמודדות זו, ובשיעור זה נמשיך את האתגר עם יכולת חדשה של הגדרת משתנים.

1. הבעיה עם CSS

בגלל החזרתיות המובנית ב CSS מאוד קשה לשמור על קשר בין כללי CSS שונים בעמוד. לכן הרבה פעמים בעת שינוי Media Query עלינו לשנות מספר כללים ומספר Properties בכל כלל. קחו לדוגמא את קוד ה CSS הבא:

.button {
  background-color: #ff4136;
  box-shadow: 1px 2px 0 #cc0e03;
}
.button:hover {
  background-color: #cc0e03;
  box-shadow: 0 0 0 #cc0e03;
}

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

2. משתנים ב CSS

משתנים ב CSS מאפשרים להגדיר ערך במקום אחד ולהשתמש בו בכמה מקומות, וכן לשנות את הערך דרך Media Queries או בתוך Selectors מסוימים. נתחיל בדוגמא הקודמת- באמצעות משתנים נוכל לכתוב אותה כך:

:root{
  --button-color: #ff4136;
  --button-color-dark: #cc0e03;
  --button-color-light: #ff7469;
}
.button {
  background-color: var(--button-color);
  box-shadow: 1px 2px 0 var(--button-color-dark);
}
.button:hover {
  background-color: var(--button-color-dark);
  box-shadow: 0 0 0 var(--button-color-dark);
}
.button:active {
  background-color: var(--button-color-light);
  box-shadow: 0 0 0 var(--button-color-dark);
}

כל Property ששמו מתחיל בשני מקפים הוא משתנה. המילה var מאפשרת לשלוף ערך של משתנה עבור שימוש בשדה אחר.

3. שינוי ערך משתנה בתוך Selector מסוים

המעבר למשתנים מאפשר לשנות את הערך מאוד בקלות בתוך Selector או דרך Media Query. נתחיל עם הרעיון הראשון ונתבונן בקוד הבא:

הכפתור השני קיבל צבעים אחרים בגלל שכלל ה CSS של info-buttons דורס את הגדרת המשתנים שהיתה ב root.

מקום נוסף בו אפשר לשנות את הערך הוא Media Queruies. הקוד הבא יגרום לכפתורים ב info-buttons לוותר על שינוי הצבע במסכים רחבים:

@media (min-width: 800px) {
  .info-buttons {
    --button-color: #00FF36;
    --button-color-dark: #000e03;
    --button-color-light: #007469;  
  }
}

4. חישובים על משתנים באמצעות calc

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

משתנים ב CSS מאפשרים תחזוקה הרבה יותר קלה של קוד CSS גדול מאחר והם מחברים בין מאפייני CSS שבמהותם קשורים אחד לשני: שנו אחד וגם כל הדברים שתלויים בו ישתנו בהתאם.