Variabler

CSS-variabler, også kendt som CSS-brugerdefinerede egenskaber, giver mulighed for at definere genanvendelige værdier i hele CSS-koden. Ved at anvende variabler kan der skabes dynamiske og fleksible designs, som er lettere at vedligeholde og opdatere.

For at erklære en variabel bruges pseudo-klassen :root øverst i CSS-filen, og variabelnavnet indledes med --. For eksempel kan vi definere en variabel --blue-color med værdien #3f42f3 i vores :root-blok:

:root {
  --blue-color: #3f42f3;
}

Når en variabel er erklæret, kan den anvendes på enhver CSS-egenskab ved hjælp af funktionen var(). For eksempel kan egenskaben color for et <h1>-element tildeles værdien af variablen --blue-color således:

h1 {
  color: var(--blue-color);
}

Kombination af viden om variabeldeklaration og anvendelse i følgende eksempel:

I dette eksempel definerer og anvender vi fem variabler til forskellige egenskaber. Ved at ændre værdierne for disse variabler kan vi nemt opdatere farverne i hele stylesheetet.

Tilsidesættelse af egenskaber

Nogle gange er det nødvendigt at tilsidesætte specifikke egenskaber i CSS for at opnå det ønskede design. Dette kan gøres ved at erklære en egenskab med samme navn inden for en indlejret selector og tildele en ny værdi.

Overvej følgende eksempel med et trafiklys med forskellige farvesignaler:

Ved at målrette de specifikke signal-klasser kan vi finjustere farven for hvert signal, samtidig med at de fælles stilarter, der er defineret i den overordnede .signal-vælger, bevares.

Bemærk

Afslutningsvis giver CSS-variabler fleksibilitet og vedligeholdelsesvenlighed, hvilket muliggør dynamiske designopdateringer, mens tilsidesættelse af egenskaber gør det muligt at finjustere stilarter og opnå de ønskede visuelle effekter.