CSS varijable, također poznate kao prilagođena svojstva, pomažu vam smanjiti ponavljanje u vašim listovima stilova. To vam, zauzvrat, pomaže uštedjeti vrijeme i trud kada mijenjate svoj dizajn. Također možete biti sigurni da nećete propustiti nijednu vrijednost koju trebate ažurirati.
Pristup DOM-u omogućuje vam stvaranje varijabli, njihovo pohranjivanje i ponovno korištenje u vašoj tablici stilova.
Kako definirati i koristiti CSS varijable
Da biste svoje tablice stilova bolje uredili, lakše ih je održavati i višekratno upotrijebiti, možete koristiti CSS varijable u bilo kojem svojstvu koje prihvaća vrijednost.
Uzmimo sljedeći primjer HTML datoteke i CSS datoteke koja ne koristi CSS varijable.
HTML:
html>
<htmljezik="en">
<glava>
<titula>CSS varijable - varijacije gumbatitula>
<vezarel="list stilova"href="Varijable.css" />
glava>
<tijelo>
<div>
<h1>CSS varijableh1>
<div>
CSS:
.btn {
podstava: 1rem 1.5rem;
pozadina: prozirna;
težina fonta: 700;
boja: crvena;
}
Ovako bi vaša stranica trebala izgledati:
The .btn klasa korištena u gornjoj tablici stilova nije dinamična i uzrokuje stvaranje zasebne klase za prilagodbu pojedinačnih gumba. Stvaranje lijepih web stranica zahtijeva da budete dinamični sa svojim front-end stilom. Implementacija gumba na ovaj način jednostavno će učiniti taj zadatak teškim za postizanje.
Kao i većina programskih jezika, morate inicijalizirati i zamijeniti CSS varijable.
Da biste inicijalizirali CSS varijablu, ispred imena varijable dodajte dvostruke crtice:
:korijen{
/*CSS varijabla*/
--ime_varijable: vrijednost;
}
Možete inicijalizirati varijablu bilo gdje, ali imajte na umu da ćete tu varijablu moći koristiti samo unutar inicijaliziranog selektora. Zbog toga se CSS varijable uobičajeno inicijaliziraju unutar korijenskog selektora. Ovo cilja na element najviše razine DOM-a i omogućuje da varijable budu dostupne cijelom HTML dokumentu na globalnoj razini.
Da biste zamijenili varijablu u svom CSS stilu, upotrijebit ćete var() svojstvo:
:korijen {
/*CSS varijabla*/
--primarni: #900c3f;
-- sekundarni: #ff5733;
}.btn {
podstava: 1rem 1.5rem;
pozadina: prozirna;
težina fonta: 700;
boja: var(--primarni);
boja pozadine: var(- sekundarni);
}
.podprimarno {
boja: var(- sekundarni);
boja pozadine: var(--primarni);
}
Korijenski selektor sadrži dvije varijable: --primarni i -- sekundarni. Obje varijable se zatim zamjenjuju u .btn klasa kao boja odnosno boja pozadine.
Pomoću varijabli možete puno lakše stilizirati pojedinačne elemente. Ponovnom upotrebom varijabli možete brzo jednom promijeniti vrijednost da biste je ažurirali u svakom primjeru.
The var() svojstvo također može uzeti drugi argument. Ovaj argument djeluje kao rezervna vrijednost za prvi argument u situaciji kada prvi nije definiran ili nije valjan.
Na primjer:
:korijen {
--primarni: #900c3f;
-- sekundarni: #ff5733;
}
.btn {
podstava: 1rem 1.5rem;
pozadina: prozirna;
težina fonta: 700;
boja: var(- primarna, plava);
}
U ovom primjeru zamijenite --primarni varijabla u boja stil. Ako iz bilo kojeg razloga ova vrijednost ne uspije, lista stilova će koristiti drugu vrijednost kao zamjensku vrijednost. Također možete koristiti drugu CSS varijablu kao rezervnu vrijednost.
Manipuliranje i nadjačavanje CSS varijabli s JavaScriptom
Manipuliranje CSS varijablama pomoću JavaScripta može biti moćan način za promjenu izgleda i dojma vaše web stranice u hodu. Pomoću JavaScripta možete ažurirati vrijednosti ovih varijabli i vidjeti promjene koje se odražavaju na vašoj web stranici.
Važno je napomenuti da će se promjene napravljene s JavaScriptom primijeniti samo na trenutnu sesiju. Morate ažurirati izvorni izvor ili pohranite novu vrijednost na klijentu, kao u kolačiću, ustrajati na promjenama.
Ovdje je primjer kako koristiti JavaScript za ažuriranje vrijednosti CSS varijable.
HTML:
html>
<htmljezik="en">
<glava>
<titula>CSS varijable - varijacije gumbatitula>
<vezarel="list stilova"href="Varijable.css" />
<skripta>
funkcijapromijeniBoju() {
// Dobivanje elementa na kojem želite promijeniti varijablu
konst mojElement = dokument.querySelector(":korijen");// Dobivanje trenutne vrijednosti varijable
neka currentValue = getComputedStyle (myElement).getPropertyValue(
"--sekundarni"
);
// set the novivrijednostza the varijabla
mojElement.stil.setProperty("-- sekundarni", "#DAF7A6");
}
skripta>
glava>
<tijelo>
<div>
<h1>CSS varijableh1>
<div>
CSS:
:korijen {
--primarni: #900c3f;
-- sekundarni: #ff5733;
}.btn {
podstava: 1rem 1.5rem;
pozadina: prozirna;
težina fonta: 700;
}
.podprimarno {
boja: var(--primarni);
boja pozadine: var(- sekundarni);
}
U ovom JavaScript kodu, promijeniBoju() funkcija ažurira boju prvog gumba kada korisnik klikne na njega.
Korištenje Metode obilaska DOM-a, možete pristupiti klasama ili selektorima primijenjenim u vašem HTML dokumentu i manipulirati vrijednostima.
Prije klika na gumb:
Nakon klika na gumb:
Također možete koristiti JavaScript za stvaranje novih CSS varijabli ili ih u potpunosti ukloniti.
Na primjer:
// Stvoriti a novivarijabla
dokument.documentElement.style.setProperty('--nova-boja', 'plavo');
// Uklanjanje varijable
dokument.documentElement.style.removeProperty('--nova-boja');
Korištenje CSS varijabli s pretprocesorima
Korištenje varijabli unutar frontend tehnologije u početku je postignuto s CSS predprocesorima kao što je SASS, LESS i Stylus.
Svrha CSS predprocesora je razviti kod koji proširuje temeljne mogućnosti standardnog CSS-a. Zatim neka se taj kod kompajlira u standardni CSS kako bi ga preglednik razumio, slično kao kako TypeScript radi s JavaScriptom.
S razvojem CSS varijabli, predprocesori više nisu toliko važni, ali još uvijek mogu ponuditi neku korist ako se kombiniraju s CSS varijablama u vašem projektu.
Možete definirati SASS varijablu $glavna-boja i koristite ga za postavljanje vrijednosti CSS varijable. Zatim upotrijebite CSS varijablu u redovnoj klasi stila.
Također možete koristiti SASS funkcije za manipuliranje vrijednostima CSS varijabli.
Na primjer:
:korijen {
--primarni: $glavna-boja;
--sekundarni: posvijetliti(var(--primarni), 20%);
}
.btn {
boja: var(--primarni);
boja pozadine: var(- sekundarni);
}
Ovdje je funkcija SASS posvijetliti () manipulira vrijednošću --primarni dobiti vrijednost za -- sekundarni.
Imajte na umu da SASS varijablama nije moguće pristupiti JavaScriptom. Dakle, ako trebate manipulirati vrijednostima svojih varijabli tijekom izvođenja, trebali biste koristiti CSS varijable.
Koristeći CSS varijable i predprocesore zajedno, možete iskoristiti obje prednosti, poput korištenja snažne značajke pretprocesora poput petlji i funkcija i značajke CSS varijabli poput CSS-a kaskadno.
Savjeti za korištenje CSS varijabli u web razvoju
Evo nekoliko važnih savjeta koji će vam pomoći da bolje iskoristite CSS varijable.
Počnite s jasnom konvencijom imenovanja
Odaberite konvenciju imenovanja za svoje varijable koja ih čini lakima za razumijevanje i upotrebu. Na primjer, upotrijebite prefiks kao što je --boja- za varijable boja ili --razmak- za varijable razmaka.
Upotrijebite varijable u medijskim upitima kako biste lakše prilagodili svoj dizajn za različite veličine zaslona.
Iskoristite kaskadnu prirodu CSS-a
Upamtite da su CSS varijable kaskadne, što znači da ako postavite varijablu na nadređeni element, to će utjecati na sve njegove potomke.
CSS varijable koristite s oprezom
Korištenje previše CSS varijabli može izazvati zabunu, stoga ih koristite s oprezom i samo kada ima smisla i poboljšava mogućnost održavanja vašeg koda.
Testirajte svoje varijable
CSS varijable jedinstveni su način za pisanje jasnog koda koji se može održavati unutar vašeg lista stilova.
Važno je napomenuti da još uvijek nisu u potpunosti podržani na svim preglednicima. Stoga biste trebali testirati svoje varijable na kompatibilnost preglednika kako biste bili sigurni da rade prema očekivanjima i da sve rezervne vrijednosti rade kako očekujete.
