5.12 CSS változók

A CSS 3-ban vezették be a CSS változók fogalmát.

CSS változó

  • Olyan változók, amelyeket a CSS fájlokban használhatsz előfeldolgozó nélkül is.
  • Média lekérdezésekben jól használhatók, mert képesek különböző szinteken egymás tulajdonságait felülbírálni.
  • Hasonlóan a programozási nyelvekhez globáli és lokális hatókörrel használhatók és az öröklés szabályait követik
  • A változónevek kis- és nagybetű érzékenyek
  • Javascripttel el tudjuk érni a CSs változók értékeit és át tudjuk írni azokat

Szintakika: -- változónév

A változókat létre kell hozni a CSS fájlban:

:root { --color: blue }
div { --color: green }
#alert { --color: red }

​A változók használata

* { color: var(--color); }

Milyenek lesznek az alábbi HTML oldalrészletben a különböző részek színei?

<p> Kék színű leszek</p>
<div>zöld színű leszek, mert öröklöm a szín beállítást a változóból</div>
<div id="alert">Vörös színű leszek, mert az #alert miatt
<p>
A belső paragrafus színe is piros lesz, mert a szülőtől örökli a tulajdonságot.
</p>
</div>

A mai modern böngészők majd mindegyike támogatja a CSS változók használatát.