CSS változók

A CSS változók, más néven egyéni tulajdonságok, lehetővé teszik, hogy értékeket tároljunk és újra felhasználjunk a stíluslapokon belül. Ezáltal a kód karbantarthatóbb, tisztább és rugalmasabb lesz.

Hogyan működnek a CSS változók?

A változókat a <:root> szelektorban érdemes deklarálni, így az egész dokumentumban elérhetőek lesznek. A <var()> függvénnyel lehet ezeket felhasználni a különböző stílusokban.

Az alábbi példa bemutatja, hogyan deklaráljunk és használjunk CSS változókat háttérszín és padding beállításához.

Több változó és újrafelhasználás

Egyszerre több változót is definiálhatunk, például színeket különböző gombokhoz. Ez leegyszerűsíti a témák kezelését és a dizájn konzisztenciáját.

A következő példában két színt tárolunk változóban, amelyeket különböző gombokhoz rendelünk hozzá.

Tippek a CSS változókhoz

A CSS változók rugalmas megoldást kínálnak a stíluslapok kezelésére. Íme néhány hasznos tipp a használatukhoz:

• Mindig a <:root>-ban deklaráld a globális változókat, hogy mindenhol elérhetőek legyenek.
• Adj beszédes neveket a változóknak, hogy könnyen érthető legyen a kód.
• Használd változókat színsémákhoz és méretekhez, hogy gyorsan tudd módosítani a dizájnt.