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.