Spremenljivke CSS, znane tudi kot lastnosti po meri, vam pomagajo zmanjšati ponavljanje v vaših slogovnih listih. To pa vam pomaga prihraniti čas in trud pri spreminjanju vašega dizajna. Prav tako ste lahko prepričani, da ne boste zamudili nobene vrednosti, ki bi jo morali posodobiti.
Dostop do DOM vam omogoča, da ustvarite spremenljivke, jih shranite in ponovno uporabite v celotnem slogovnem listu.
Kako definirati in uporabljati spremenljivke CSS
Če želite, da bodo vaši slogovni listi bolj urejeni, vzdržljivi in ponovno uporabni, lahko uporabite spremenljivke CSS v kateri koli lastnosti, ki sprejema vrednost.
Vzemite naslednji primer datoteke HTML in datoteke CSS, ki ne uporabljata spremenljivk CSS.
HTML:
html>
<htmljezik="en">
<glavo>
<naslov>Spremenljivke CSS – različice gumbovnaslov>
<povezavarel="stylesheet"href="Variables.css" />
glavo>
<telo>
<div>
<h1>Spremenljivke CSSh1>
<div>
CSS:
.btn {
oblazinjenje: 1rem 1.5rem;
ozadje: prozorno;
teža pisave: 700;
barva: rdeča;
}
Tako naj bi izgledala vaša stran:
The .btn razred, uporabljen v zgornjem slogovnem listu, ni dinamičen in povzroči, da ustvarite ločen razred za prilagajanje posameznih gumbov. Ustvarjanje čudovitih spletnih mest zahteva, da ste dinamični s stilom sprednjega dela. Izvedba gumbov na ta način bo to opravilo preprosto težko doseči.
Kot večina programskih jezikov morate inicializirati in zamenjati spremenljivke CSS.
Če želite inicializirati spremenljivko CSS, dodajte pred ime spremenljivke dvojne vezaje:
:root{
/*CSS spremenljivka*/
--ime_spremenljivke: vrednost;
}
Spremenljivko lahko inicializirate kjer koli, vendar upoštevajte, da boste to spremenljivko lahko uporabili le znotraj inicializiranega izbirnika. Zaradi tega se spremenljivke CSS običajno inicializirajo znotraj korenskega izbirnika. To je namenjeno elementu DOM najvišje ravni in omogoča, da so spremenljivke dostopne celotnemu dokumentu HTML na globalni ravni.
Za zamenjavo spremenljivke v vašem slogu CSS boste uporabili var() lastnina:
:root {
/*CSS spremenljivka*/
--primarni: #900c3f;
-- sekundarni: #ff5733;
}.btn {
oblazinjenje: 1rem 1.5rem;
ozadje: prozorno;
teža pisave: 700;
barva: var(--primarni);
Barva ozadja: var(--sekundarni);
}
.podprimarno {
barva: var(--sekundarni);
Barva ozadja: var(--primarni);
}
Korenski izbirnik vsebuje dve spremenljivki: -- primarno in -- sekundarni. Obe spremenljivki sta nato zamenjani v .btn razred kot barva oziroma barva ozadja.
Z uporabo spremenljivk lahko veliko lažje stilizirate posamezne elemente. S ponovno uporabo spremenljivk lahko enkrat hitro spremenite vrednost in jo posodobite v vsakem primeru.
The var() Lastnost lahko sprejme tudi drugi argument. Ta argument deluje kot nadomestna vrednost za prvi argument v primeru, ko prvi ni definiran ali ni veljaven.
Na primer:
:root {
--primarni: #900c3f;
-- sekundarni: #ff5733;
}
.btn {
oblazinjenje: 1rem 1.5rem;
ozadje: prozorno;
teža pisave: 700;
barva: var(- primarna, modra);
}
V tem primeru nadomestite -- primarno spremenljivko v barva stil. Če iz kakršnega koli razloga ta vrednost ne uspe, bo stilska lista uporabila drugo vrednost kot nadomestno. Kot rezervno vrednost lahko uporabite tudi drugo spremenljivko CSS.
Manipulacija in preglasitev spremenljivk CSS z JavaScriptom
Manipulacija spremenljivk CSS z uporabo JavaScripta je lahko zmogljiv način za sprotno spreminjanje videza in občutka vašega spletnega mesta. Z uporabo JavaScripta lahko posodobite vrednosti teh spremenljivk in si ogledate spremembe, ki se odražajo na vašem spletnem mestu.
Pomembno je vedeti, da bodo spremembe, narejene z JavaScriptom, veljale samo za trenutno sejo. Posodobiti morate izvirni vir ali shrani novo vrednost na odjemalca, kot v piškotku, da vztrajajo pri spremembah.
Tukaj je primer uporabe JavaScripta za posodobitev vrednosti spremenljivke CSS.
HTML:
html>
<htmljezik="en">
<glavo>
<naslov>Spremenljivke CSS – različice gumbovnaslov>
<povezavarel="stylesheet"href="Variables.css" />
<scenarij>
funkcijospremeni barvo() {
// Pridobite element, na katerem želite spremeniti spremenljivko
konst mojElement = dokument.querySelector(":root");// Pridobi trenutno vrednost spremenljivke
pustiti currentValue = getComputedStyle (myElement).getPropertyValue(
"--sekundarni"
);
// Set the novovrednostza the spremenljivka
mojElement.slog.setProperty("-- sekundarni", "#DAF7A6");
}
scenarij>
glavo>
<telo>
<div>
<h1>Spremenljivke CSSh1>
<div>
CSS:
:root {
--primarni: #900c3f;
-- sekundarni: #ff5733;
}.btn {
oblazinjenje: 1rem 1.5rem;
ozadje: prozorno;
teža pisave: 700;
}
.podprimarno {
barva: var(--primarni);
Barva ozadja: var(--sekundarni);
}
V tej kodi JavaScript je spremeni barvo() funkcija posodobi barvo prvega gumba, ko uporabnik nanj klikne.
Uporaba Metode prečkanja DOM, lahko dostopate do razredov ali izbirnikov, uporabljenih v vašem dokumentu HTML, in manipulirate z vrednostmi.
Preden kliknete gumb:
Po kliku na gumb:
Uporabite lahko tudi JavaScript za ustvarjanje novih spremenljivk CSS ali pa jih v celoti odstranite.
Na primer:
// Ustvari a novospremenljivka
dokument.documentElement.style.setProperty('--nova-barva', 'modra');
// Odstrani spremenljivko
dokument.documentElement.style.removeProperty('--nova-barva');
Uporaba spremenljivk CSS s predprocesorji
Uporaba spremenljivk znotraj tehnologije frontend je bila prvotno dosežena s predprocesorji CSS, kot je SASS, LESS in Stylus.
Namen predprocesorjev CSS je razviti kodo, ki razširja temeljne zmogljivosti standardnega CSS. Nato naj to kodo prevedejo v standardni CSS, da jo brskalnik razume, podobno kot kako TypeScript deluje z JavaScriptom.
Z razvojem spremenljivk CSS predprocesorji niso več tako pomembni, vendar lahko še vedno nudijo nekaj uporabnosti, če jih kombinirate s spremenljivkami CSS v vašem projektu.
Določite lahko spremenljivko SASS $main-color in ga uporabite za nastavitev vrednosti spremenljivke CSS. Nato uporabite spremenljivko CSS v običajnem slogovnem razredu.
Funkcije SASS lahko uporabite tudi za manipulacijo vrednosti spremenljivk CSS.
Na primer:
:root {
--primarni: $main-color;
--sekundarni: osvetli(var(--primarni), 20%);
}
.btn {
barva: var(--primarni);
Barva ozadja: var(--sekundarni);
}
Tukaj je funkcija SASS osvetliti () manipulira z vrednostjo -- primarno pridobiti vrednost za -- sekundarni.
Upoštevajte, da spremenljivke SASS niso dostopne z JavaScriptom. Torej, če morate manipulirati z vrednostmi vaših spremenljivk med izvajanjem, morate uporabiti spremenljivke CSS.
Če skupaj uporabljate spremenljivke CSS in predprocesorje, lahko izkoristite obe prednosti, na primer uporabo zmogljive funkcije predprocesorja, kot so zanke in funkcije, in spremenljivke CSS, kot je CSS kaskadno.
Nasveti za uporabo spremenljivk CSS v spletnem razvoju
Tukaj je nekaj pomembnih nasvetov, ki vam bodo pomagali bolje uporabiti spremenljivke CSS.
Začnite s konvencijo o jasnem poimenovanju
Izberite konvencijo poimenovanja za svoje spremenljivke, ki omogoča enostavno razumevanje in uporabo. Na primer, uporabite predpono, kot je --barva- za barvne spremenljivke oz --razmik- za spremenljivke razmika.
Uporabite spremenljivke v medijskih poizvedbah, da olajšate prilagoditev oblikovanja za različne velikosti zaslona.
Izkoristite kaskadno naravo CSS
Ne pozabite, da so spremenljivke CSS kaskadne, kar pomeni, da če spremenljivko nastavite na nadrejeni element, bo to vplivalo na vse njegove podrejene elemente.
Spremenljivke CSS uporabljajte previdno
Uporaba preveč spremenljivk CSS lahko povzroči zmedo, zato jih uporabljajte previdno in le, kadar je smiselno in izboljša vzdržljivost vaše kode.
Preizkusite svoje spremenljivke
Spremenljivke CSS so edinstven način za pisanje jasne kode, ki jo je mogoče vzdrževati v vašem slogovnem listu.
Pomembno je omeniti, da še vedno niso v celoti podprti v vseh brskalnikih. Zato morate svoje spremenljivke preizkusiti glede združljivosti brskalnika, da zagotovite, da delujejo po pričakovanjih in da morebitne nadomestne vrednosti delujejo tako, kot pričakujete.