Mérei Tamás webdesigner
Helló!Mérei Tamás vagyok, webdesigner

Weboldalak és felhasználói felületek tervezésével és kódolásával foglalkozom. Dolgozom magánszemélyeknek, vállalkozásoknak, fejlesztő cégeknek és reklámügynökségeknek.

CSS változók

CSS változók használatával átláthatóbbá és könnyebben karbantarthatóvá tehetjük a forráskódot. A megvalósításhoz a var() függvényt használjuk, amely két paramétert fogad. Az egyik a változó neve, a másik pedig egy fallback érték ami akkor kerül betöltésre, ha a változó nem található.

Leggyakrabban a :root pseudo class-on belül deklarálunk változókat, mert ezeket globálisan tudjuk használni.

CSS változók tartalma

Célszerű a kinézetet leíró dolgokat beszédes nevű változókba tenni. Ha így járunk el, akkor a fájlra ránézve bárki számára azonnal egyértelmű lesz, hogy hol tudja módosítani a színsémát, betűkészletet, betűméretet, vagy a layout-hoz tartozó egyéb beállításokat.

Ilyen változók lehetnek például a linkek színe, a body háttérszíne, betűkészlet, de akár a lekerekítések értékét is kitehetjük globális változóba. A példánál maradva az elnevezések lehetnek az alábbiak: –links-color –body-background-color –font-family –font-size.

Az alábbi forráskód laikus számára is elég beszédes.


:root {
	--links-color: red;
	--body-background-color: blue;
	--font-family: Arial;
	--font-size: 18px
}

Változók tartalmának betöltése

Az alábbi forráskód mutatja, hogyan tudjuk az imént létrehozott változókat felhasználni.


body {
	background-color: var(--body-background-color);
	font-family: var(--font-family);
	font-size: var(--font-size);
}
a {
	color: var(--text);
}

A videóban elkészített mintát az alábbi gombra kattinva tudod megnézni.

forráskód

CSS változók videó

CSS változók videó