A CSS Custom Properties (más néven Változók) nagy győzelmet jelent a front-end fejlesztők számára. A változók erejét hozza el a CSS-hez, ami kevesebb ismétlést, jobb olvashatóságot és nagyobb rugalmasságot eredményez.
Ráadásul, ellentétben a CSS előfeldolgozók változóival, a CSS változók valójában a DOM részei, aminek rengeteg előnye van. Tehát lényegében olyanok, mint a SASS és a LESS változók a szteroidokon. Ebben a cikkben összefoglaló kurzust adok az új technológia működéséről.
Létrehoztam egy ingyenes és interaktív, 8 részes tanfolyamot is a CSS-változókról, ezért nézze meg, ha szeretne szakértővé válni ebben a témában.
Szeretne megtanulni CSS-változókat? Itt az ingyenes 8 részes tanfolyamom!
Miért érdemes megtanulni a CSS-változókat?
Számos oka lehet a változók CSS-ben való használatának. Az egyik legvonzóbb, hogy csökkenti az ismétlést a stíluslapban.
A fenti példában sokkal jobb létrehozni egy változót a #ffeeadszín számára, mint megismételni, mint itt:
Ez nem csak megkönnyíti a kód olvasását, hanem nagyobb rugalmasságot is biztosít, abban az esetben, ha meg akarja változtatni ezt a színt.
Most ez évek óta valóban lehetséges a SASS és a LESS változókkal. Van azonban néhány nagy előnye a CSS-változóknak.
- Működésükhöz nem szükséges semmilyen transzláció, mivel a böngészőben honosak. Tehát nincs szükség semmilyen beállításra a kezdéshez, ahogyan a SASS és a LESS használatával is.
- A DOM-ban élnek, amely rengeteg előnnyel jár, amelyeket ebben a cikkben és a közelgő tanfolyamomban átélek.
Most kezdjük el a CSS-változók tanulását!
Az első CSS-változó deklarálása
Egy változó deklarálásához először el kell döntenie, hogy a változó melyik hatókörben éljen. Ha azt szeretné, hogy globálisan elérhető legyen, egyszerűen definiálja az :rootálosztályon. Ez egyezik a dokumentumfa gyökérelemével (általában a címkével).
Mivel a változók öröklődnek, ez a változó elérhetővé válik az egész alkalmazásban, mivel az összes DOM elem a címke leszármazottja .
:root { --main-color: #ff6f69; } Amint láthatja, ugyanúgy deklarál egy változót, mint bármely CSS tulajdonságot. A változónak azonban két kötőjellel kell kezdődnie.
Egy változó eléréséhez használnia kell a var()függvényt, és paraméterként meg kell adnia a változó nevét.
#title { color: var(--main-color); } És ez megadja a címének a #f6f69színét:
Helyi változó deklarálása
Létrehozhat helyi változókat is, amelyek csak az általa deklarált elem és a gyermekei számára érhetők el. Ennek akkor van értelme, ha tudja, hogy egy változót csak az alkalmazás egy bizonyos részében (vagy részeiben) fognak használni.
Például előfordulhat, hogy van egy riasztó mezője, amely egy speciális színt használ, amelyet az alkalmazás más helyein nem használnak. Ebben az esetben érdemes lehet elkerülni a globális hatókörbe történő felvételt:
.alert { --alert-color: #ff6f69; } Ezt a változót gyermekei már használhatják:
.alert p { color: var(--alert-color); border: 1px solid var(--alert-color); } Ha alert-colorvalahol máshol próbálta használni a változót az alkalmazásában, például a navigációs sávban, akkor egyszerűen nem fog működni. A böngésző csak figyelmen kívül hagyná a CSS ezen vonalát.
Könnyebb reagálóképesség a változókkal
A CSS-változók nagy előnye, hogy hozzáférnek a DOM-hoz. A LESS vagy a SASS esetében ez nem így van, mivel a változókat a szokásos CSS-ig állítják össze.
A gyakorlatban ez azt jelenti, hogy például megváltoztathatja a változókat a képernyő szélessége alapján:
:root { --main-font-size: 16px; } media all and (max-width: 600px) { :root { --main-font-size: 12px; } } Ezzel az egyszerű négy soros kóddal frissítette az egész alkalmazás fő betűméretét, ha kis képernyőkön nézte meg. Nagyon elegáns, mi?
A változók elérése a JavaScript használatával
A DOM-ban élés további előnye, hogy a változókat JavaScript-sel érheti el, sőt például frissítheti is például a felhasználói interakciók alapján. Ez akkor tökéletes, ha a felhasználók számára lehetőséget akar biztosítani a webhely megváltoztatására (például a betűméret beállítására).
Folytassuk a példával a cikk elejétől. A JavaScript-ben lévő CSS-változó megragadása három sornyi kódot igényel.
var root = document.querySelector(':root'); var rootStyles = getComputedStyle(root); var mainColor = rootStyles.getPropertyValue('--main-color'); console.log(mainColor); \--> '#ffeead' A CSS-változó frissítéséhez egyszerűen hívja meg a setPropertymetódust azon az elemen, amelyben a változókat deklarálták, és adja meg a változó nevét első paraméterként, az új értéket pedig másodikként.
root.style.setProperty('--main-color', '#88d8b0') Ez a fő szín megváltoztathatja az alkalmazás teljes megjelenését, így tökéletes arra, hogy a felhasználók beállíthassák az Ön webhelyének témáját.
Egyetlen változó frissítésével megváltoztathatja a navigációs sáv, a szöveg és az elemek színét.
Böngésző támogatás
Jelenleg a globális webhelyforgalom 77 százaléka támogatja a CSS-változókat, az Egyesült Államokban pedig csaknem 90 százalék. Egy ideje már használjuk a CSS-változókat a Scrimba.com-on, mivel közönségünk eléggé hozzáértő, és többnyire modern böngészőket használ.
Ok, ennyi volt. Remélem, megtanultál valamit!
Ha rendesen meg akarja tanulni, feltétlenül nézze meg az ingyenes CSS-változók tanfolyamomat a Scrimban.
Köszönöm, hogy elolvasta! A nevem Per Borgen, a Scrimba társalapítója vagyok - ez a legegyszerűbb módja a kódolás megtanulásának. Tekintse meg adaptív webdesign bootcampunkat, ha meg akarja tanulni a modern weboldal professzionális felépítését.
