Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

CSS-variabler, også kendt som brugerdefinerede egenskaber, hjælper dig med at minimere gentagelser i dine typografiark. Dette hjælper dig til gengæld med at spare tid og kræfter, når du laver ændringer i dit design. Du kan også være sikker på, at du ikke går glip af nogen værdier, du skal opdatere.

Adgang til DOM giver dig mulighed for at oprette variabler, gemme dem og genbruge dem i hele dit typografiark.

Sådan defineres og bruges CSS-variabler

For at gøre dine typografiark mere arrangerede, vedligeholdelige og genbrugelige, kan du bruge CSS-variabler i enhver egenskab, der accepterer en værdi.

Tag følgende eksempel på en HTML-fil og CSS-fil, der ikke bruger CSS-variabler.

HTML:

html>
<htmllang="da">
<hoved>
<titel>CSS-variabler - knapvariationertitel>
<linkrel="stylesheet"href="Variables.css" />
hoved>
<legeme>
<div>
<h1>CSS-variablerh1>
<div>
instagram viewer

CSS:

.btn {
polstring: 1rem 1.5rem;
 baggrund: gennemsigtig;
 skrifttype-vægt: 700;
 farve: rød;
}

Sådan skal din side se ud:

Det .btn klasse brugt i ovenstående typografiark er ikke dynamisk og får dig til at oprette en separat klasse for at tilpasse individuelle knapper. At skabe smukke hjemmesider kræver, at du er dynamisk med din frontend-styling. Implementering af knapper på denne måde vil simpelthen gøre den opgave en smerte at udføre.

Som de fleste programmeringssprog skal du initialisere og erstatte CSS-variabler.

For at initialisere en CSS-variabel skal du præfikse variabelnavnet med dobbelte bindestreger:

:rod{
/*CSS variabel*/
--variabelnavn: værdi;
}

Du kan initialisere en variabel hvor som helst, men bemærk, at du kun vil være i stand til at bruge den variabel inde i den initialiserede vælger. På grund af dette initialiseres CSS-variabler konventionelt inde i rodvælgeren. Dette er rettet mod det højeste niveau af elementet i DOM og gør det muligt for variablerne at være tilgængelige for hele HTML-dokumentet på global skala.

For at erstatte variablen i din CSS-styling, skal du bruge var() ejendom:

:rod {
/*CSS variabel*/
 --primær: #900c3f;
 --sekundær: #ff5733;
}
.btn {
polstring: 1rem 1.5rem;
 baggrund: gennemsigtig;
 skrifttype-vægt: 700;
 farve: var(--primær);
 baggrundsfarve: var(--sekundær);
}
.sub-primær {
 farve: var(--sekundær);
 baggrundsfarve: var(--primær);
}

Rodvælgeren indeholder to variable: --primær og --sekundær. Begge variabler erstattes derefter i .btn klasse som henholdsvis farve og baggrundsfarve.

Ved at bruge variablerne kan du meget nemmere style individuelle elementer. Ved at genbruge variabler kan du hurtigt ændre en værdi én gang for at opdatere den i alle tilfælde.

Det var() ejendom kan også tage et andet argument. Dette argument fungerer som en reserveværdi for det første argument i en situation, hvor det første ikke er defineret eller er ugyldigt.

For eksempel:

:rod {
 --primær: #900c3f;
 --sekundær: #ff5733;
}
.btn {
polstring: 1rem 1.5rem;
 baggrund: gennemsigtig;
 skrifttype-vægt: 700;
 farve: var(--primær, blå);
}

I dette eksempel skal du erstatte --primær variabel ind farve stil. Hvis denne værdi af en eller anden grund mislykkes, vil typografiarket bruge den anden værdi som en reserve. Du kan også bruge en anden CSS-variabel som en reserveværdi.

Manipulering og tilsidesættelse af CSS-variabler med JavaScript

Manipulering af CSS-variabler ved hjælp af JavaScript kan være en effektiv måde at ændre udseendet og følelsen af ​​dit websted på i farten. Ved at bruge JavaScript kan du opdatere værdierne for disse variabler og se ændringerne afspejlet på dit websted.

Det er vigtigt at bemærke, at ændringerne foretaget med JavaScript kun gælder for den aktuelle session. Du skal enten opdatere den originale kilde eller gemme den nye værdi på klienten, som i en cookie, for at fastholde ændringerne.

Her er et eksempel på, hvordan man bruger JavaScript til at opdatere værdien af ​​en CSS-variabel.

HTML:

html>
<htmllang="da">
<hoved>
<titel>CSS-variabler - knapvariationertitel>
<linkrel="stylesheet"href="Variables.css" />
<manuskript>
fungereskifte farve() {
// Hent det element, du vil ændre variablen på
konst mitElement = dokument.querySelector(":rod");
// Få den aktuelle værdi af variablen
lade currentValue = getComputedStyle (myElement).getPropertyValue(
"--sekundær"
 );
 // Sæt det nyværditil det variabel
mitElement.stil.setProperty("--sekundær", "#DAF7A6");
 }
manuskript>
hoved>
<legeme>
<div>
<h1>CSS-variablerh1>
<div>

CSS:

:rod {
 --primær: #900c3f;
 --sekundær: #ff5733;
}
.btn {
polstring: 1rem 1.5rem;
 baggrund: gennemsigtig;
 skrifttype-vægt: 700;
}
.sub-primær {
 farve: var(--primær);
 baggrundsfarve: var(--sekundær);
}

I denne JavaScript-kode er changeColor() funktion opdaterer farven på den første knap, når brugeren klikker på den.

Ved brug af DOM-traverseringsmetoder, kan du få adgang til klasserne eller vælgerne anvendt i dit HTML-dokument og manipulere værdierne.

Før du klikker på knappen:

Efter at have klikket på knappen:

Du kan også bruge JavaScript til at oprette nye CSS-variabler eller fjerne dem helt.

For eksempel:

// skab -en nyvariabel
dokument.documentElement.style.setProperty('--ny-farve', 'blå');
// Fjern en variabel
dokument.documentElement.style.removeProperty('--ny-farve');

Brug af CSS-variabler med præprocessorer

Brug af variabler inden for frontend-teknologi blev oprindeligt opnået med CSS-forprocessorer som SASS, LESS og Stylus.

Formålet med CSS præprocessorer er at udvikle kode, der udvider de grundlæggende muligheder for standard CSS. Så få den kode kompileret i standard CSS, så browseren kan forstå, ligesom hvordan TypeScript fungerer med JavaScript.

Med udviklingen af ​​CSS-variabler er præprocessorer ikke længere så vigtige, men de kan stadig tilbyde en vis brug, hvis de kombineres med CSS-variabler i dit projekt.

Du kan definere en SASS-variabel $hovedfarve og brug den til at indstille værdien af ​​en CSS-variabel. Brug derefter CSS-variablen i en almindelig stilklasse.

Du kan også bruge SASS-funktioner til at manipulere værdierne af CSS-variabler.

For eksempel:

:rod {
 --primær: $hovedfarve;
 --sekundær: lysere(var(--primær), 20%);
}
.btn {
 farve: var(--primær);
 baggrundsfarve: var(--sekundær);
}

Her er SASS-funktionen lysere () manipulerer værdien af --primær at få en værdi for --sekundær.

Bemærk, at SASS-variabler ikke er tilgængelige med JavaScript. Så hvis du har brug for at manipulere værdierne af dine variabler under kørsel, bør du bruge CSS-variabler.

Ved at bruge CSS-variabler og præprocessorer sammen kan du drage fordel af begge fordele, såsom at bruge kraftfulde præprocessorfunktioner som sløjfer og funktioner og CSS-variablefunktioner som CSS kaskade.

Tips til brug af CSS-variabler i webudvikling

Her er et par vigtige tip at bemærke, som hjælper dig med at bruge CSS-variabler bedre.

Start med en klar navnekonvention

Vælg en navnekonvention for dine variabler, der gør dem nemme at forstå og bruge. Brug for eksempel et præfiks som f.eks --farve- for farvevariable eller --mellemrum- for mellemrumsvariabler.

Brug variabler i medieforespørgsler for at gøre det nemt at justere dit design til forskellige skærmstørrelser.

Udnyt CSS's Cascading Nature

Husk, at CSS-variabler er overlappende, hvilket betyder, at hvis du indstiller en variabel på et overordnet element, vil det påvirke alle dets underordnede elementer.

Brug CSS-variabler med forsigtighed

Brug af for mange CSS-variabler kan forårsage forvirring, så brug dem med forsigtighed, og kun når det giver mening og forbedrer vedligeholdelsen af ​​din kode.

Test dine variabler

CSS-variabler er en unik måde at skrive klar og vedligeholdelig kode i dit typografiark.

Det er vigtigt at bemærke, at de stadig ikke er fuldt understøttet i alle browsere. Derfor bør du teste dine variabler for browserkompatibilitet for at sikre, at de fungerer som forventet, og at eventuelle reserveværdier fungerer, som du forventer.