A CSS3-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ális é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
Szintaktika: --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.
Speciális CSS változók
Currentcolor - Ha ezt az értéket használjuk egy CSS fájlban, akkor az adott helyen a szín az utoljára beállított szín lesz. Például az alábbi példában beállítunk egy beviteli mezőre egy színt és a beviteli mező kerete is ugyanazt a színt veszi fel. Ezt a CSS értelmező fogja kiválasztani!
input{
color: red;
border: 1px solid currentcolor;
}A fenti példában ja a később megmutatott SCSS változókat is használjuk, akkor könnyen tudunk egységes kinézetű dokumentumokat létrehozni.