תיעוד CSS עם דוגמאות להרצה: משתני CSS

Q: איך מצהירים על משתנה CSS?

כותבים בתוך כלל מאפיין ששמו מתחיל בשני מקפים, בדרך כלל ב-:root בשביל ערך גלובלי: :root { --brand: #2563eb; }. קוראים אותו בכל מקום עם var(--brand), למשל color: var(--brand);.

Q: מה זה :root ב-CSS?

:root הוא pseudo-class שבוחר את אלמנט השורש של המסמך, שבדף HTML הוא . כל האלמנטים יורשים את המשתנים שמוצהרים שם. יש לו הספציפיות של מחלקה, ולכן הוא גובר על סלקטור html פשוט.

Q: איך קובעים ערך ברירת מחדל למשתנה CSS?

מעבירים ארגומנט שני ל-var(): color: var(--accent, #2563eb);. ערך הגיבוי משמש כש---accent לא מוגדר על האלמנט או על אחד מהאבות שלו. הוא לא משמש כשהמשתנה מוגדר עם ערך לא תקין עבור המאפיין.

Q: איך משנים משתנה CSS עם JavaScript?

קוראים ל-setProperty על ה-style של אלמנט: document.documentElement.style.setProperty('--brand', '#16a34a'). כל כלל שמשתמש ב-var(--brand) מתעדכן בבת אחת. את הערך הנוכחי קוראים עם getComputedStyle(el).getPropertyValue('--brand').

Q: האם שמות של משתני CSS רגישים לאותיות גדולות וקטנות?

כן. --Brand ו---brand הם שני משתנים שונים, בניגוד לשמות מאפיינים רגילים כמו color, שלא רגישים לאותיות גדולות וקטנות.

הצהרה על משתנה CSS ושימוש בו

משתנה CSS, ובשמו הרשמי custom property, הוא מאפיין ששמו מתחיל ב---. מצהירים עליו פעם אחת, בדרך כלל ב-:root כדי שכל הדף יירש אותו, וקוראים אותו בכל מקום עם var().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS variables</title>
  <style>
    :root {
      --brand: #2563eb;
      --radius: 8px;
      --space: 12px;
    }

    .btn {
      background: var(--brand);
      color: white;
      border: 0;
      border-radius: var(--radius);
      padding: var(--space) calc(var(--space) * 2);
    }

    .card {
      border: 2px solid var(--brand);
      border-radius: var(--radius);
      padding: var(--space);
      margin-bottom: var(--space);
    }
  </style>
</head>
<body>
  <div class="card">Change --brand in :root and both change.</div>
  <button class="btn">Button</button>
</body>
</html>

שנו את --brand ל-#16a34a והגבול של הכרטיס והכפתור ישתנו יחד. זה כל העניין: ערך אחד, מקום אחד לשנות אותו. משתנים משתלבים גם עם calc(), כמו שה-padding הצדדי של הכפתור מראה.

תחביר

:root {
  --name: value;         /* declare */
}

.element {
  color: var(--name);                 /* use */
  color: var(--name, #111827);        /* use, with a fallback */
  padding: calc(var(--space) * 2);    /* compute with it */
}

כלל	פירוט
שם	מתחיל ב-`--`, ואחריו אותיות, ספרות, `-` או `_`. רגיש לאותיות גדולות וקטנות: `--Brand` הוא לא `--brand`.
ערך	כמעט כל דבר: צבע, אורך, רשימה, מחרוזת. הוא לא נבדק עד שמשתמשים בו.
איפה להצהיר	בכל כלל. `:root` לערכים גלובליים, הסלקטור של רכיב לערכים מקומיים.
ירושה	custom properties עוברים בירושה, ולכן ילד רואה את הערכים של האבות שלו.
איפה `var()` עובד	רק בערכים של מאפיינים, לא בסלקטורים, בשמות מאפיינים או בתנאים של `@media`.

:root בוחר את האלמנט <html>. משתמשים בו במקום html כי יש לו הספציפיות של מחלקה, ולפי המוסכמה הוא מסמן "הגדרות גלובליות".

תחום: דריסת משתנה לפי רכיב

מכיוון שמשתנים עוברים בירושה, הצהרה מחדש על משתנה באלמנט משנה אותו עבור האלמנט הזה ועבור כל מה שבתוכו. הכלל שמשתמש במשתנה נשאר אותו דבר.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scope</title>
  <style>
    :root { --accent: #2563eb; }

    .alert {
      border-inline-start: 6px solid var(--accent);
      background: #e5e7eb;
      color: #111827;
      padding: 10px 14px;
      margin-bottom: 8px;
    }

    .alert.success { --accent: #16a34a; }
    .alert.warning { --accent: #f59e0b; }
  </style>
</head>
<body>
  <div class="alert">Info uses the global blue.</div>
  <div class="alert success">Success overrides --accent.</div>
  <div class="alert warning">Warning overrides it too.</div>
</body>
</html>

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

ערכי גיבוי

var(--name, fallback) משתמש בערך הגיבוי כשהמשתנה לא מוגדר על האלמנט או על אף אחד מהאבות שלו. כל מה שאחרי הפסיק הראשון הוא ערך הגיבוי, ולכן הוא יכול להכיל פסיקים בעצמו (var(--font, Georgia, serif)), והוא יכול להיות var() נוסף.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fallback</title>
  <style>
    p { padding: 8px; color: white; }
    .a { background: var(--missing, #16a34a); }
    .b { --defined: #2563eb; background: var(--defined, #16a34a); }
    .c { background: var(--missing, var(--also-missing, #f59e0b)); }
  </style>
</head>
<body>
  <p class="a">Green: --missing is not defined, fallback used.</p>
  <p class="b">Blue: --defined exists, fallback ignored.</p>
  <p class="c">Amber: nested fallback.</p>
</body>
</html>

שינוי משתנים עם JavaScript: מתג ערכת צבעים

JavaScript יכול לקבוע משתנה על כל אלמנט עם style.setProperty(). קבעו אותו על document.documentElement (האלמנט <html>) וכל הדף יעקוב. הדפוס הנפוץ יותר מחליף מחלקה שמגדירה מחדש את המשתנים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Theme</title>
  <style>
    :root {
      --bg: #ffffff;
      --text: #111827;
      --muted: #e5e7eb;
    }
    .dark {
      --bg: #111827;
      --text: #f9fafb;
      --muted: #374151;
    }
    body { background: var(--bg); color: var(--text); padding: 12px; }
    .panel { background: var(--muted); padding: 12px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="panel">
    <p>Theme colors come from three variables.</p>
    <button id="toggle">Toggle dark mode</button>
    <button id="brand">Random text color</button>
  </div>
  <script>
    const root = document.documentElement;
    document.getElementById('toggle').onclick = () => root.classList.toggle('dark');
    document.getElementById('brand').onclick = () => {
      const hue = Math.floor(Math.random() * 360);
      root.style.setProperty('--text', `hsl(${hue} 70% 40%)`);
      console.log(getComputedStyle(root).getPropertyValue('--text'));
    };
  </script>
</body>
</html>

קוראים משתנה בחזרה עם getComputedStyle(element).getPropertyValue('--text'). שימו לב ש-setProperty כותב inline style על <html>, שגובר על המחלקה .dark, ולכן אחרי לחיצה על הכפתור השני צבע הטקסט נשאר במקומו בשתי ערכות הצבעים עד שמסירים את הערך ה-inline עם root.style.removeProperty('--text').

העברת ערכים מ-HTML

משתנה בתוך מאפיין style הוא הדרך הנקייה ביותר להעביר נתונים של אלמנט ספציפי לגיליון הסגנונות. העיצוב נשאר ב-CSS, וה-HTML רק מספק מספר.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bars</title>
  <style>
    .bar {
      width: calc(var(--value) * 1%);
      box-sizing: border-box;
      background: #2563eb;
      color: white;
      padding: 4px 8px;
      margin-bottom: 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="bar" style="--value: 30">30</div>
  <div class="bar" style="--value: 65">65</div>
  <div class="bar" style="--value: 90">90</div>
</body>
</html>

calc(var(--value) * 1%) הופך את המספר הפשוט לאחוז. משתנים יכולים גם להשתנות בתוך media query: @media (min-width: 900px) { :root { --space: 20px; } } גורם לכל ריווח שקורא את --space לגדול במסכים רחבים.

מלכודת הערך הלא תקין

הדפדפן לא יכול לדעת מראש אם משתנה מחזיק ערך תקין עבור המאפיין שמשתמש בו. כשהוא לא תקין, המאפיין לא חוזר להצהרה הקודמת בכלל. הוא הופך ללא תקין בזמן חישוב הערך (invalid at computed-value time) ומתנהג כאילו הוגדר ל-unset: מאפיינים שעוברים בירושה מקבלים את הערך של ההורה, והשאר מקבלים את הערך ההתחלתי שלהם.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Invalid value</title>
  <style>
    :root { --size: red; } /* not a length */
    .box {
      background: #e5e7eb;
      padding: 12px;
      font-size: 24px;
      font-size: var(--size); /* invalid: 24px is NOT kept */
      border: 4px solid #f59e0b;
      border-width: var(--missing); /* undefined, no fallback */
    }
  </style>
</head>
<body>
  <div class="box">16px text and a 3px border, not 24px and 4px.</div>
</body>
</html>

הטקסט יורש 16px מ-<body>, ו-border-width חוזר לערך ההתחלתי שלו, medium, שהדפדפנים מציירים כ-3px. בלי משתנים, הצהרה לא תקינה נזרקת וזו שלפניה שורדת; עם משתנים, כבר מאוחר מדי בשביל זה. ערך גיבוי לא עוזר כשהמשתנה מוגדר אבל שגוי: ערך הגיבוי מיועד רק למשתנה שלא הוגדר.

משתני CSS מול משתני Sass

	משתני CSS	משתני Sass
תחביר	`--brand: #2563eb;` ו-`var(--brand)`	`$brand: #2563eb;`
מתי נפתרים	בדפדפן, בזמן אמת	בזמן הבנייה, ונעלמים מהפלט
שינוי לפי אלמנט	כן, דרך ירושה	לא
שינוי עם מחלקה או media query	כן	לא
שינוי מ-JavaScript	כן	לא
שימוש בסלקטורים או בתנאי media	לא	כן

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

טעויות נפוצות

לשכוח את שני המקפים. var(brand), או --brand שהוצהר כ--brand, לא עובדים.
שימוש במשתנה בתוך media query. @media (min-width: var(--bp)) לא תקין. תנאי media דורשים ערכים מפורשים.
לצפות שההצהרה הקודמת תשרוד משתנה לא תקין. היא לא שורדת; ראו את המלכודת למעלה.
שילוב שגוי של יחידות. --gap: 10; ואחר כך margin: var(--gap)px לא יוצר 10px. השתמשו ב-calc(var(--gap) * 1px) או שמרו 10px.
הצהרה על האלמנט הלא נכון. משתנה שהוצהר על .card לא גלוי לאחים או להורה שלו; הצהירו על ערכים משותפים ב-:root.

שאלות נפוצות

איך מצהירים על משתנה CSS?

כותבים בתוך כלל מאפיין ששמו מתחיל בשני מקפים, בדרך כלל ב-:root בשביל ערך גלובלי: :root { --brand: #2563eb; }. קוראים אותו בכל מקום עם var(--brand), למשל color: var(--brand);.

מה זה :root ב-CSS?

:root הוא pseudo-class שבוחר את אלמנט השורש של המסמך, שבדף HTML הוא <html>. כל האלמנטים יורשים את המשתנים שמוצהרים שם. יש לו הספציפיות של מחלקה, ולכן הוא גובר על סלקטור html פשוט.

איך קובעים ערך ברירת מחדל למשתנה CSS?

מעבירים ארגומנט שני ל-var(): color: var(--accent, #2563eb);. ערך הגיבוי משמש כש---accent לא מוגדר על האלמנט או על אחד מהאבות שלו. הוא לא משמש כשהמשתנה מוגדר עם ערך לא תקין עבור המאפיין.

איך משנים משתנה CSS עם JavaScript?

קוראים ל-setProperty על ה-style של אלמנט: document.documentElement.style.setProperty('--brand', '#16a34a'). כל כלל שמשתמש ב-var(--brand) מתעדכן בבת אחת. את הערך הנוכחי קוראים עם getComputedStyle(el).getPropertyValue('--brand').

מה ההבדל בין משתני CSS למשתני Sass?

משתני Sass מוחלפים בערכים שלהם כשגיליון הסגנונות עובר קומפילציה, ולכן הם לא יכולים להשתנות בדפדפן. משתני CSS חיים בדפדפן: הם עוברים בירושה, יכולים להיות שונים בכל אלמנט, מגיבים ל-media queries ולמחלקות, ואפשר לשנות אותם מ-JavaScript.

האם שמות של משתני CSS רגישים לאותיות גדולות וקטנות?

כן. --Brand ו---brand הם שני משתנים שונים, בניגוד לשמות מאפיינים רגילים כמו color, שלא רגישים לאותיות גדולות וקטנות.

מושגים קשורים