Close Popup
Eng

CSS változók

2018.05.24

Az előző cikkünkben kifejtettük, hogy mik azok a CSS előfeldolgozók (SASS, LESS) és miért érdemes őket használni. A mai cikkünkben a CSS változókról lesz szó.

Korábbi cikkünkben kifejtettük, hogy mik azok a CSS előfeldolgozók (SASS, LESS) és miért érdemes őket használni. A mai cikkünkben a CSS változókról lesz szó.

Nagy előny, hogy ezek használatához nincs szükség a preprocesszorokra (előfeldolgozókra), hanem ezeket közvetlenül a CSS is képes feldolgozni, ezáltal a böngészők egyből tudják értelmezni őket (míg a SASS kódot először le kell fordítanunk a böngésző számára is értelmezhető CSS kimenetre).

A modern böngészők nagy részében már lehetőség van közvetlenül is használni a változókat. 

Ez azért jó, mert használatukkal nagyobb rugalmasságot érhetsz el a tulajdonságok kezelésénél, kevesebb lesz a kódismétlés és olvashatóbbá válik a kód. Sajnos persze vannak kivételek, például az Internet Explorerben egyáltalán nem támogatottak és Microsoft Edge-ben is van pár ismert hiba, ami nem megfelelő működést eredményez.

Az alábbi táblázat mutatja a támogatottságot a különböző böngészőkben (a táblázat forrása:  https://caniuse.com/). A zöld szín a teljes körűen támogatott, a sárga a részben támogatott, a piros pedig a nem támogatott.

css tamogatottsag

Miért jó, ha CSS változókat használunk?

Ahogy már említettük, a CSS változókat használhatjuk előfeldolgozók nélkül is. Emelett lehetőségünk van ugyanazt a tulajdonságot a különböző szinteken meghatározni, amire az előfeldogozók nem képesek. 

További előny, hogy JavaScripttel hozzáférhetünk és módosíthatjuk is.

Nézzünk egy példát a CSS változók használatára!

css valtozok

A fenti példában először is a ":root" pszeudo osztállyal meghatároztuk a változónk hatókörét.
Ez ebben az esetben a "<html>" elemet jelöli.
A változót a "--változó_neve: változó_értéke;" formában hozzuk létre, használni pedig így tudjuk: "tulajdonság: var(--változó_neve);".
Fontos megjegyezni, hogy követik az öröklés szabályait és érzékenyek a kis és nagy betűkre.
Tehát a

css

és a 

css

két külön változót jelöl.