Ismerd meg a CSS változókat mindössze 5 perc alatt

Ha találkoztál már valamilyen programozási nyelvvel, akkor számodra sem ismeretlenek a változók. A változókat ugyanis a legtöbb programozási nyelv ismeri és használja. Eddig ha a CSS-el dolgoztál, ez a lehetőség csak akkor volt meg, ha valamilyen CSS előfeldolgozót használtál.

 

Szerencsére a web gyorsan fejlődik, és a modern böngészők nagy részében mostantól lehetőség van közvetlenül is használni a változókat. Ez azért jó, mert a használatukkal kevesebb lesz a kódismétlés, olvashatóbbá válik a kód, illetve nagyobb rugalmasságot érhetsz el a tulajdonságok kezelésénél.

 

Mi a különbség a CSS előfeldolgozókban használt változók és a CSS változók között?

A CSS előfeldolgozók, illetve ahogy angolul nevezzük, a CSS preprocessor-ok (a legnépszerűbbek a Less és a Sass), egy kibővített CSS szintaxissal jobban kezelhető kód írását teszik lehetővé, amelyben használhatunk változókat, különféle vezérlési szerkezeteket, pl. ciklusokat vagy elágazásokat. A program aztán elkészíti nekünk a böngészők által is értelmezhető hagyományos CSS kódokat. Az előfeldolgozók változói tehát semmit sem csinálnak a böngészőben, sőt a böngésző nem is tudja értelmezni ezeket. Nézzünk rá egy példát.

 

Sass kód

 

Fordítás utáni CSS kód

 

A példában a Sass kódban létrehozunk egy változót, amelynek adunk egy színt (értéket). Az elemeknél már ezt a változót használjuk, nem a direkt színt. Ezt a kódot fordítja le a compiler, amely a második blokkban látható CSS kimenetet adja és amit már a böngésző is tud értelmezni.

 

A CSS változóknál erre nincs szükség, mivel ezeket közvetlenül a CSS is képes feldolgozni és használni, fordítás nélkül is.

Hagyományosan így hozzuk létre a CSS kódban a színeket.

 

 

A változók használata esetén először is létre kell hoznunk egy változót a fenti vörös színhez, amelynek be kell állítanunk a hatókörét is. A lenti példában ezt a :root  pszeudo-osztályra állítottuk be, amely megegyezik a dokumentum <html> elemével. A változót létrehozni mindig egy dupla kötőjellel kell, majd ezután a szokott módon adunk neki egy értéket.

–változó neve: változó értéke;

A használata esetén a var szóval vezetjük be, majd a zárójelpár közé beírjuk a használni kívánt változónk nevét.

tulajdonság: var(–változó neve);

 

 

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

  • A CSS változókat használhatjuk előfeldolgozók nélkül is
  • Lehetőségünk van ugyanazt a tulajdonságot a különböző szinteken meghatározni (felülbírálni) pl. a média lekérdezéseken belül is, amire az előfeldolgozók nem képesek. Ez azt jelenti, hogy a média lekérdezéseken belül az egyedi tulajdonságok jól használhatók a reszponzív tervezéshez.
  • Hozzáférhetünk és módosíthatjuk őket a JavaScript-el

 

Amire figyelj

  • A CSS változók, hasonlóan a programozási nyelvek változóihoz, globális és lokális hatókörrel rendelkeznek és az öröklés szabályait követik.
  • A változók nevei kis és nagybetű érzékenyek, ezért az elnevezéseknél figyelj erre.

 

Nézzünk egy példát az öröklésre

Az alábbi kódban néhány elemhez definiáltunk színeket, mindet a  –color változóra.

 

 

Ha megnézed ezt a HTML kódot, meg tudod mondani melyik elemnek milyen színe lesz?

 

 

Az első bekezdés (Milyen színű leszek?) kék lesz, mivel a sima bekezdésre nincs beállítva tulajdonság, ezért a kék színt örökölni fogja a :root elemtől.

:root { --color: blue; }

Az első div elem (És én?) zöld színű lesz, mivel a div elemekre beállítottuk a zöld színt.

div { --color: green; }

Az #alert azonosítójú div elem piros lesz, mivel erre beállítottuk közvetlenül a piros színt. Itt azért nem a div elemekre beállított zöld szín lesz a használt, mert az #alert azonosítóval (kiválasztóval) pontosabban határoztuk meg a tulajdonságot.

#alert { --color: red; }

Végül az #alert div-en belüli p bekezdés szintén piros lesz. Ugye a bekezdéselemen nincs változó deklarálva és mivel a CSS változók öröklődnek, a használt értéket a szülő elemtől örökölte. Ez pedig ebben az esetben az #alert div, mivel a bekezdés ezen belül helyezkedik el.

#alert { --color: red; }

Hol használhatod a CSS változókat?

A modern böngésző programok nagy része támogatja a CSS változók használatát és szerencsére egyre több felhasználó részesíti ezeket előnyben. Az alábbi ábrán megnézheted, milyen böngészőprogramok támogatják a használatukat.

 

2018-05-22

0 válasz erre "Ismerd meg a CSS változókat mindössze 5 perc alatt"

Minden vélemény számít!

Az e-mail-címet nem tesszük közzé.

Hogyan tanulhatsz?

Pár évig mi is a hagyományos, írásos-képes videós anyagokkal oktattunk, de szerettük volna ezt hatékonyabbá tenni.
Így a frissített tanfolyamaink minden leckéje élő szöveges magyar nyelvű  oktatóvideókból áll.

Minden jog fenntartva! © , D-kreatív webműhely.
top