Primærfargen i designet ditt brukes på knapper, lenker, overskrifter og hover-tilstander. Når kunden vil bytte fra blått til grønt, må du finne og erstatte fargekoden på seks forskjellige steder i stilarket. En av dem glipper, og plutselig er en knapp fortsatt blå mens resten er grønn. CSS variabler, også kjent som custom properties, løser dette. Du definerer verdien ett sted og refererer til den overalt. Endrer du variabelen, oppdateres alt som bruker den automatisk.
Slik oppretter du CSS variabler med custom properties
En CSS-variabel defineres med to bindestreker foran navnet: --primary-color. Du tildeler den en verdi akkurat som en vanlig CSS-egenskap: --primary-color: #3740FF. Navnet kan være hva du vil, men det må alltid begynne med to bindestreker. Bruk beskrivende navn som forteller hva verdien representerer, ikke hvilken farge det tilfeldigvis er akkurat nå.
For å bruke variabelen skriver du var(--primary-color) der du ellers ville skrevet fargekoden direkte. Var-funksjonen henter verdien fra variabelen og setter den inn. Du kan bruke var() overalt der du bruker vanlige CSS-verdier: i farger, størrelser, marginer og hvilken som helst annen egenskap.
:root-selektoren gjør variabelen global
Variabler følger CSS sin arveregel: de er tilgjengelige for elementet de er definert på og alle barn av det elementet. Vil du at variabelen skal være tilgjengelig overalt på siden, definerer du den på :root-selektoren. Root-selektoren treffer html-elementet, som er øverst i dokumenttreet. Alt inne i html arver variablene du definerer der.
Som vist i videoleksjonen: du oppretter en :root-blokk, legger inn variabelen for primærfargen, og erstatter alle forekomster av fargekoden i stilarket med var-funksjonen. Når du endrer verdien i :root til for eksempel tomato, oppdateres knapper, bakgrunner og hover-tilstander over hele nettsiden umiddelbart.
Fallback-verdier gir trygghet
Var-funksjonen godtar en valgfri andre parameter: en fallback-verdi. Skriver du var(--primary-color, blue), bruker nettleseren blue dersom variabelen ikke finnes. Det er nyttig når du bygger komponenter som skal fungere uavhengig av om variabelen er definert i prosjektet. Fallback-verdien sikrer at designet ikke bryter selv om noen glemmer å definere variabelen.
Variabler for konsistent design
De mest nyttige CSS-variablene er de som fanger opp gjentakende verdier i designet ditt. Farger er det opplagte eksempelet, men variabler fungerer like godt for størrelser, avstander, border-radius og fontvekter. Et typisk designsystem definerer variabler for primærfarge, sekundærfarge, tekstfarge, bakgrunnsfarge, spacing-verdier og skriftstørrelser. Endrer du spacing-variabelen, oppdateres marginer og padding konsistent gjennom hele prosjektet.
Variabler gjør det også enklere å lage temaer. Vil du støtte mørkt modus, definerer du et nytt sett med variabler under en annen selektor. Byttet mellom lyst og mørkt tema blir en endring av hvilke variabelverdier som gjelder, ikke en omskriving av hele stilarket.
Forskjellen fra preprocessor-variabler
Har du brukt Sass eller Less, kjenner du kanskje til variabler med $ eller @. CSS custom properties fungerer annerledes. Sass-variabler kompileres bort og erstattes med faste verdier før koden når nettleseren. CSS-variabler lever i nettleseren og kan endres dynamisk med JavaScript eller media queries. Det gjør dem langt kraftigere for interaktive tema-bytter og responsivt design.
Du kan lese mer om avansert bruk av custom properties i MDN sin dokumentasjon om CSS custom properties.
Variabler i samspill med resten av CSS
CSS-variabler kombineres naturlig med andre egenskaper du allerede bruker. Definer en variabel for skyggefargen og bruk den i box-shadow. Lag en variabel for primærfargen og gjenbruk den i bakgrunnsfarger, tekst og overganger. Styrken ligger i at endringer forplanter seg konsistent gjennom hele designet fra ett enkelt sted.
Lær mer om CSS-variabler med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du:
- Hvordan du oppretter variabler i :root og bruker var-funksjonen i stilarket
- Hvordan du erstatter gjentatte verdier med variabler for enklere vedlikehold
- Hvordan du raskt oppdaterer farger og verdier på tvers av hele nettsiden ved å endre en variabel
