CSS (Cascading Style Sheets) הוא שפת עיצוב המשמשת לעיצוב דפי אינטרנט. CSS אינה מוגדרת שפת תכנות אבל אחד השיפורים הגדולים שנעשו בשפה בשנים האחרונות הוא הכנסת משתנים (CSS Variables) או Custom Properties, בדומה לשפות תכנות. משתנים ב-CSS מאפשרים לנו להגדיר ערכים שנוכל להשתמש בהם שוב ושוב במסמך ה-CSS, מה שהופך את הקוד ליותר קריא, קל לתחזוקה וניתן לשינוי בקלות.

הגדרת משתנים ב-CSS

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

לדוגמה:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

שימוש במשתנים

כדי להשתמש במשתנים שהגדרנו, נשתמש בפונקציה var(). לדוגמה:

body {
  font-size: var(--font-size-base);
  color: var(--primary-color);
}

h1 {
  margin-bottom: calc(var(--spacing-unit) * 2);
  color: var(--secondary-color);
}

בפונקציה var(), ניתן גם לספק ערך ברירת מחדל שישמש במקרה שהמשתנה לא הוגדר:

p {
  color: var(--undefined-color, #333);
}

Best Practices לשימוש במשתנים ב-CSS

1. הגדרת משתנים גלובליים: יש להגדיר משתנים ברמה הגלובלית (:root), כך שניתן יהיה להשתמש בהם בכל חלקי המסמך. זה מסייע ביצירת מערכת עיצוב אחידה ונוחה לשינוי.
2. שמות משתנים ברורים: יש להשתמש בשמות משתנים ברורים ומובנים, כך שניתן יהיה להבין במהירות מה הערך של כל משתנה. לדוגמה, --primary-color ברור יותר מאשר --color1.
3. ארגון משתנים לפי קטגוריות: ניתן לארגן משתנים לפי קטגוריות כגון צבעים, גדלים, ריווח וכו'. זה מקל על התחזוקה ומציאת משתנים רלוונטיים.
4. שימוש במשתנים לחישובים: משתנים יכולים להיות שימושיים במיוחד בחישובים באמצעות הפונקציה calc(). לדוגמה, אפשר להגדיר גודל ריווח יחסי ולהשתמש בו בכל המסמך.
5. משתנים בתוך סלקטורים: ניתן להגדיר משתנים בתוך סלקטורים ספציפיים כדי ליצור נושאים (themes) או עיצובים מיוחדים עבור חלקים שונים של המסמך.

.button-primary {
  --button-bg-color: var(--primary-color);
  background-color: var(--button-bg-color);
}

.button-secondary {
  --button-bg-color: var(--secondary-color);
  background-color: var(--button-bg-color);
}

סיכום

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

מקורות:
CSS Variables – MDN

אנחנו מלמדים CSS בצורה מעמיקה בקורס Full-Stack מוזמנים לפנות אלינו לייעוץ בנושא.