Variabler

CSS-variabler, også kjent som CSS-egendefinerte egenskaper, gir en metode for å definere gjenbrukbare verdier i hele CSS-koden. Ved å bruke variabler kan man lage dynamiske og fleksible design som er enklere å vedlikeholde og oppdatere.

For å deklarere en variabel, brukes pseudo-klassen :root øverst i CSS-filen, og variabelnavnet prefikses med --. For eksempel, la oss definere en variabel --blue-color med verdien #3f42f3 i vår :root-blokk:

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

Når en variabel er deklarert, kan den brukes på enhver CSS-egenskap ved hjelp av funksjonen var(). For eksempel, for å tildele egenskapen color til et <h1>-element verdien fra variabelen --blue-color, kan man skrive:

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

Kombiner kunnskapen om deklarasjon og bruk av variabler i følgende eksempel:

I dette eksemplet definerer og bruker vi fem variabler på ulike egenskaper. Ved å endre verdiene til disse variablene, kan vi enkelt oppdatere fargene i hele stilarket.

Overstyring av egenskaper

Noen ganger må vi overstyre spesifikke egenskaper i CSS for å oppnå ønsket stil. Dette kan gjøres ved å erklære en egenskap med samme navn innenfor en nestet selektor og tildele en ny verdi.

Se følgende eksempel på et trafikklys med ulike fargesignaler:

Ved å målrette de spesifikke signal-klassene kan vi finjustere fargen for hvert signal, samtidig som vi opprettholder de delte stilene definert i den grunnleggende .signal-velgeren.

Merk

Avslutningsvis gir CSS-variabler fleksibilitet og vedlikeholdbarhet, slik at dynamiske designoppdateringer er mulig, mens overstyring av egenskaper gjør det mulig å finjustere stiler og oppnå ønskede visuelle effekter.