CSS-variabler, også kjent som egendefinerte egenskaper, hjelper deg med å minimere repetisjon i stilarkene dine. Dette hjelper deg igjen med å spare tid og krefter når du gjør endringer i designet. Du kan også være trygg på at du ikke går glipp av noen verdier du trenger å oppdatere.
Tilgang til DOM lar deg lage variabler, lagre dem og gjenbruke dem gjennom hele stilarket ditt.
Hvordan definere og bruke CSS-variabler
For å gjøre stilarkene dine mer arrangert, vedlikeholdbare og gjenbrukbare, kan du bruke CSS-variabler i enhver egenskap som godtar en verdi.
Ta følgende eksempel på en HTML-fil og CSS-fil som ikke bruker CSS-variabler.
HTML:
html>
<htmllang="no">
<hode>
<tittel>CSS-variabler – knappevariasjonertittel>
<linkrel="stilark"href="Variables.css" />
hode>
<kropp>
<div>
<h1>CSS-variablerh1>
<div>
CSS:
.btn {
polstring: 1rem 1.5rem;
bakgrunn: gjennomsiktig;
font-vekt: 700;
fargen rød;
}
Slik skal siden din se ut:
De .btn klasse brukt i stilarket ovenfor er ikke dynamisk og får deg til å opprette en egen klasse for å tilpasse individuelle knapper. Å lage vakre nettsteder krever at du er dynamisk med frontend-stylingen din. Å implementere knapper på denne måten vil ganske enkelt gjøre den oppgaven vanskelig å oppnå.
Som de fleste programmeringsspråk, må du initialisere og erstatte CSS-variabler.
For å initialisere en CSS-variabel, prefiks variabelnavnet med doble bindestreker:
:rot{
/*CSS-variabel*/
--variabelnavn: verdi;
}
Du kan initialisere en variabel hvor som helst, men merk at du bare vil kunne bruke den variabelen inne i den initialiserte velgeren. På grunn av dette initialiseres CSS-variabler konvensjonelt inne i rotvelgeren. Dette retter seg mot det høyeste nivåelementet i DOM og lar variablene være tilgjengelige for hele HTML-dokumentet på global skala.
For å erstatte variabelen i CSS-stilen din, bruker du var() eiendom:
:rot {
/*CSS-variabel*/
--hoved: #900c3f;
--sekundær: #ff5733;
}.btn {
polstring: 1rem 1.5rem;
bakgrunn: gjennomsiktig;
font-vekt: 700;
farge: var(--hoved);
bakgrunnsfarge: var(--sekundær);
}
.sub-primær {
farge: var(--sekundær);
bakgrunnsfarge: var(--hoved);
}
Rotvelgeren inneholder to variabler: --hoved og --sekundær. Begge variablene erstattes deretter med .btn klasse som henholdsvis farge og bakgrunnsfarge.
Ved å bruke variablene kan du style individuelle elementer mye lettere. Ved å gjenbruke variabler kan du raskt endre en verdi én gang for å oppdatere den i alle tilfeller.
De var() eiendom kan også ta et andre argument. Dette argumentet fungerer som en reserveverdi for det første argumentet i en situasjon der det første ikke er definert eller er ugyldig.
For eksempel:
:rot {
--hoved: #900c3f;
--sekundær: #ff5733;
}
.btn {
polstring: 1rem 1.5rem;
bakgrunn: gjennomsiktig;
font-vekt: 700;
farge: var(-primær, blå);
}
I dette eksemplet erstatter du --hoved variabel inn farge stil. Hvis denne verdien av en eller annen grunn mislykkes, vil stilarket bruke den andre verdien som en reserve. Du kan også bruke en annen CSS-variabel som reserveverdi.
Manipulere og overstyre CSS-variabler med JavaScript
Manipulering av CSS-variabler ved hjelp av JavaScript kan være en effektiv måte å endre utseendet og følelsen til nettstedet ditt på. Ved å bruke JavaScript kan du oppdatere verdiene til disse variablene og se endringene som gjenspeiles på nettstedet ditt.
Det er viktig å merke seg at endringene som er gjort med JavaScript, kun vil gjelde for den nåværende økten. Du må enten oppdatere den opprinnelige kilden eller lagre den nye verdien på klienten, som i en informasjonskapsel, for å fortsette endringene.
Her er et eksempel på hvordan du bruker JavaScript for å oppdatere verdien til en CSS-variabel.
HTML:
html>
<htmllang="no">
<hode>
<tittel>CSS-variabler – knappevariasjonertittel>
<linkrel="stilark"href="Variables.css" />
<manus>
funksjonendre farge() {
// Få elementet du vil endre variabelen på
konst mittElement = dokument.querySelector(":rot");// Få gjeldende verdi av variabelen
la currentValue = getComputedStyle (myElement).getPropertyValue(
"--sekundær"
);
// Sett de nyverditil de variabel
mittElement.stil.setProperty("--sekundær", "#DAF7A6");
}
manus>
hode>
<kropp>
<div>
<h1>CSS-variablerh1>
<div>
CSS:
:rot {
--hoved: #900c3f;
--sekundær: #ff5733;
}.btn {
polstring: 1rem 1.5rem;
bakgrunn: gjennomsiktig;
font-vekt: 700;
}
.sub-primær {
farge: var(--hoved);
bakgrunnsfarge: var(--sekundær);
}
I denne JavaScript-koden er changeColor() funksjonen oppdaterer fargen på den første knappen når brukeren klikker på den.
Ved hjelp av DOM-traverseringsmetoder, kan du få tilgang til klassene eller velgerne som brukes i HTML-dokumentet og manipulere verdiene.
Før du klikker på knappen:
Etter å ha klikket på knappen:
Du kan også bruke JavaScript til å lage nye CSS-variabler eller fjerne dem helt.
For eksempel:
// Skape en nyvariabel
dokument.documentElement.style.setProperty('--ny-farge', 'blå');
// Fjern en variabel
dokument.documentElement.style.removeProperty('--ny-farge');
Bruke CSS-variabler med forprosessorer
Bruk av variabler innen frontend-teknologi ble opprinnelig oppnådd med CSS-forprosessorer som SASS, LESS og Stylus.
Formålet med CSS-forprosessorer er å utvikle kode som utvider de grunnleggende egenskapene til standard CSS. Så har den koden kompilert inn i standard CSS for nettleseren å forstå, omtrent som hvordan TypeScript fungerer med JavaScript.
Med utviklingen av CSS-variabler er forprosessorer ikke lenger like viktige, men de kan fortsatt tilby en viss bruk hvis de kombineres med CSS-variabler i prosjektet ditt.
Du kan definere en SASS-variabel $hovedfarge og bruk den til å angi verdien til en CSS-variabel. Bruk deretter CSS-variabelen i en vanlig stilklasse.
Du kan også bruke SASS-funksjoner til å manipulere verdiene til CSS-variabler.
For eksempel:
:rot {
--primær: $hovedfarge;
--sekundær: lysere(var(--hoved), 20%);
}
.btn {
farge: var(--hoved);
bakgrunnsfarge: var(--sekundær);
}
Her er SASS-funksjonen lysere() manipulerer verdien av --hoved å få en verdi for --sekundær.
Merk at SASS-variabler ikke er tilgjengelige med JavaScript. Så hvis du trenger å manipulere verdiene til variablene dine under kjøring, bør du bruke CSS-variabler.
Ved å bruke CSS-variabler og forprosessorer sammen, kan du dra nytte av begge fordelene, som å bruke kraftige preprosessorfunksjoner som looper og funksjoner og CSS-variabler funksjoner som CSS gjennomgripende.
Tips for bruk av CSS-variabler i webutvikling
Her er noen viktige tips å merke seg som vil hjelpe deg å bruke CSS-variabler bedre.
Start med en klar navnekonvensjon
Velg en navnekonvensjon for variablene dine som gjør dem enkle å forstå og bruke. Bruk for eksempel et prefiks som f.eks --farge- for fargevariabler eller --mellomrom- for avstandsvariabler.
Bruk variabler i mediespørringer for å gjøre det enkelt å justere designet for forskjellige skjermstørrelser.
Dra nytte av CSS's Cascading Nature
Husk at CSS-variabler er overlappende, noe som betyr at hvis du setter en variabel på et overordnet element, vil det påvirke alle dets underordnede element.
Bruk CSS-variabler med forsiktighet
Bruk av for mange CSS-variabler kan føre til forvirring, så bruk dem med forsiktighet, og bare når det gir mening og forbedrer vedlikeholdbarheten til koden din.
Test variablene dine
CSS-variabler er en unik måte å skrive tydelig og vedlikeholdbar kode i stilarket ditt.
Det er viktig å merke seg at de fortsatt ikke støttes fullt ut i alle nettlesere. Derfor bør du teste variablene dine for nettleserkompatibilitet for å sikre at de fungerer som forventet og at eventuelle reserveverdier fungerer som du forventer at de skal.
