Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A CSS-változók, más néven egyéni tulajdonságok, segítenek minimalizálni az ismétlődéseket a stíluslapokon. Ezzel viszont időt és energiát takaríthat meg a terv módosítása során. Biztos lehet benne, hogy nem fog lemaradni egyetlen frissítendő értékről sem.

A DOM-hoz való hozzáférés lehetővé teszi változók létrehozását, tárolását és újrafelhasználását a stíluslapon.

Hogyan definiáljunk és használjunk CSS-változókat

A stíluslapok rendezettebbé, karbantarthatóbbá és újrafelhasználhatóbbá tételéhez bármilyen értéket elfogadó tulajdonságban használhat CSS-változókat.

Vegyük a következő példát egy HTML- és CSS-fájlra, amely nem használ CSS-változókat.

HTML:

html>
<htmllang="en">
<fej>
<cím>CSS-változók – Gombváltozatokcím>
<linkrel="stíluslap"href="Variables.css" />
fej>
<test>
<div>
<h1>CSS-változókh1>
<div>
instagram viewer

CSS:

.btn {
párnázás: 1rem 1.5rem;
 háttér: átlátszó;
 betűsúly: 700;
 piros szín;
}

Így kell kinéznie az oldalának:

A .btn A fenti stíluslapon használt osztály nem dinamikus, ezért külön osztályt kell létrehoznia az egyes gombok testreszabásához. Gyönyörű webhelyek létrehozásához dinamikusnak kell lennie a front-end stílusban. A gombok ilyen módon történő megvalósítása egyszerűen fájdalmassá teszi ezt a feladatot.

A legtöbb programozási nyelvhez hasonlóan inicializálnia és helyettesítenie kell a CSS-változókat.

Egy CSS-változó inicializálásához dupla kötőjelet írjon a változónév elé:

:gyökér{
/*CSS-változó*/
--változónév: érték;
}

Bárhol inicializálhat egy változót, de vegye figyelembe, hogy ezt a változót csak az inicializált választóban használhatja. Emiatt a CSS-változók hagyományosan a gyökérválasztóban inicializálódnak. Ez a DOM legmagasabb szintű elemét célozza meg, és lehetővé teszi, hogy a változók a teljes HTML-dokumentum számára elérhetőek legyenek globális szinten.

A változó CSS-stílusának behelyettesítéséhez használja a var() ingatlan:

:gyökér {
/*CSS-változó*/
 --elsődleges: #900c3f;
 --másodlagos: #ff5733;
}
.btn {
párnázás: 1rem 1.5rem;
 háttér: átlátszó;
 betűsúly: 700;
 szín: var(--elsődleges);
 háttérszín: var(--másodlagos);
}
.alelsődleges {
 szín: var(--másodlagos);
 háttérszín: var(--elsődleges);
}

A gyökérválasztó két változót tartalmaz: --elsődleges és --másodlagos. Ezután mindkét változó behelyettesítésre kerül a .btn osztály színként, illetve háttérszínként.

A változók segítségével sokkal egyszerűbben formálhatja az egyes elemeket. A változók újrafelhasználásával gyorsan megváltoztathatja az értéket, hogy minden esetben frissítse.

A var() A tulajdonság egy második érvet is felvehet. Ez az argumentum az első argumentum tartalék értékeként működik olyan helyzetben, amikor az első nincs definiálva vagy érvénytelen.

Például:

:gyökér {
 --elsődleges: #900c3f;
 --másodlagos: #ff5733;
}
.btn {
párnázás: 1rem 1.5rem;
 háttér: átlátszó;
 betűsúly: 700;
 szín: var(--elsődleges, kék);
}

Ebben a példában helyettesítse a --elsődleges változó be szín stílus. Ha bármilyen okból ez az érték meghiúsul, a stíluslap a második értéket fogja használni tartalékként. Más CSS-változót is használhat tartalék értékként.

CSS-változók manipulálása és felülírása JavaScript segítségével

A CSS-változók JavaScript használatával történő manipulálása hatékony módja lehet webhelye megjelenésének és hangulatának menet közbeni megváltoztatásának. A JavaScript használatával frissítheti ezeknek a változóknak az értékeit, és megtekintheti a változásokat a webhelyén.

Fontos megjegyezni, hogy a JavaScript használatával végzett módosítások csak az aktuális munkamenetre vonatkoznak. Frissítenie kell az eredeti forrást, vagy tárolja az új értéket az ügyfélen, mint egy cookie-ban, hogy fenntartsák a változásokat.

Íme egy példa arra, hogyan használhatja a JavaScriptet egy CSS-változó értékének frissítésére.

HTML:

html>
<htmllang="en">
<fej>
<cím>CSS-változók – Gombváltozatokcím>
<linkrel="stíluslap"href="Variables.css" />
<forgatókönyv>
funkciószínét változtatni() {
// Szerezze be azt az elemet, amelyen módosítani szeretné a változót
const myElement = dokumentum.querySelector(":gyökér");
// A változó aktuális értékének lekérése
hagyja currentValue = getComputedStyle (myElement).getPropertyValue(
"--másodlagos"
 );
 // Készlet a újértékszámára a változó
myElement.stílus.setProperty("--másodlagos", "#DAF7A6");
 }
forgatókönyv>
fej>
<test>
<div>
<h1>CSS-változókh1>
<div>

CSS:

:gyökér {
 --elsődleges: #900c3f;
 --másodlagos: #ff5733;
}
.btn {
párnázás: 1rem 1.5rem;
 háttér: átlátszó;
 betűsúly: 700;
}
.alelsődleges {
 szín: var(--elsődleges);
 háttérszín: var(--másodlagos);
}

Ebben a JavaScript-kódban a színét változtatni() funkció frissíti az első gomb színét, amikor a felhasználó rákattint.

Használata DOM bejárási módszerek, elérheti a HTML-dokumentumban alkalmazott osztályokat vagy kijelölőket, és módosíthatja az értékeket.

Mielőtt rákattint a gombra:

A gombra kattintás után:

A JavaScript segítségével új CSS-változókat is létrehozhat, vagy teljesen eltávolíthatja azokat.

Például:

// Teremt a újváltozó
dokumentum.documentElement.style.setProperty('--új-szín', 'kék');
// Változó eltávolítása
dokumentum.documentElement.style.removeProperty('--új-szín');

CSS-változók használata előfeldolgozókkal

A változók használatát a frontend technológián belül kezdetben olyan CSS előfeldolgozókkal érték el, mint például SASS, LESS és Stylus.

A CSS előfeldolgozók célja olyan kód kifejlesztése, amely kiterjeszti a szabványos CSS alapvető képességeit. Ezután fordítsa le a kódot szabványos CSS-be, hogy a böngésző megértse, hasonlóan hogyan működik a TypeScript a JavaScripttel.

A CSS-változók fejlődésével az előfeldolgozók már nem olyan fontosak, de továbbra is hasznosak lehetnek, ha a projektben CSS-változókkal kombinálják.

Megadhat egy SASS változót $fő-szín és ezzel beállíthatja egy CSS-változó értékét. Ezután használja a CSS-változót egy normál stílusosztályban.

A SASS-függvények segítségével módosíthatja a CSS-változók értékét.

Például:

:gyökér {
 --elsődleges: $fő-szín;
 --secondary: lighten(var(--elsődleges), 20%);
}
.btn {
 szín: var(--elsődleges);
 háttérszín: var(--másodlagos);
}

Itt a SASS funkció világosít() értékét manipulálja --elsődleges számára értéket szerezni --másodlagos.

Vegye figyelembe, hogy a SASS-változók nem érhetők el a JavaScript segítségével. Tehát ha futás közben módosítania kell a változók értékeit, akkor CSS-változókat kell használnia.

A CSS-változók és az előfeldolgozók együttes használatával mindkét előnyt kihasználhatja, például a használatot erőteljes előfeldolgozó funkciók, például hurkok és függvények, valamint CSS-változók, például CSS lépcsőzetes.

Tippek a CSS-változók használatához a webfejlesztésben

Íme néhány fontos tipp, amelyek segítenek a CSS-változók jobb kihasználásában.

Kezdje a világos elnevezési konvencióval

Válasszon olyan elnevezési konvenciót a változóihoz, amely megkönnyíti azok megértését és használatát. Például használjon olyan előtagot, mint pl --szín- színváltozókhoz ill --távköz- a térköz változókhoz.

Használjon változókat a médialekérdezésekben, hogy megkönnyítse a kialakítás különböző képernyőméretekhez való igazítását.

Használja ki a CSS lépcsőzetes jellegét

Ne feledje, hogy a CSS-változók lépcsőzetesek, ami azt jelenti, hogy ha beállít egy változót egy szülőelemen, akkor az minden gyermekére hatással lesz.

Óvatosan használja a CSS-változókat

A túl sok CSS-változó használata zavart okozhat, ezért óvatosan használja őket, és csak akkor, ha ez értelmes és javítja a kód karbantarthatóságát.

Teszteld a változóidat

A CSS-változók egyedülálló módja annak, hogy világos és karbantartható kódot írjon a stíluslapon belül.

Fontos megjegyezni, hogy még mindig nem minden böngésző támogatja teljes mértékben. Ezért tesztelje a változók böngészőkompatibilitását, hogy megbizonyosodjon arról, hogy a várt módon működnek, és a tartalék értékek az elvárásoknak megfelelően működnek.