CSS változók

2023.03.21.

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);
}

CSS változók videó