Utforsk mulighetene med CSS-variabler
De fleste nettsider benytter seg av CSS for å forbedre utseendet og designe de ulike elementene. CSS, som står for Cascading Style Sheets, er i bunn og grunn ikke et programmeringsspråk. Likevel er CSS et kraftig verktøy som kan kombineres med programmeringsspråk som JavaScript for å skape dynamiske og interaktive nettsider.
Hvis du har erfaring med programmeringsspråk, for eksempel JavaScript, er du kjent med konseptet om å definere en variabel, gi den en verdi og bruke den på nytt i ulike deler av koden din. Det er godt å vite at denne tilnærmingen også kan anvendes i CSS.
Denne artikkelen gir en innføring i CSS-variabler, forklarer fordelene med å bruke dem, og viser deg trinn for trinn hvordan du deklarerer og bruker en variabel i CSS.
Hva er egentlig CSS-variabler?
CSS-variabler, også kjent som egendefinerte egenskaper, er en mekanisme som gjør det mulig for webutviklere å lagre verdier som kan gjenbrukes i hele stilarket. Tenk deg at du kan definere skrifttypen, bakgrunnsfargen eller skriftstørrelsen som én gang, og deretter enkelt bruke disse verdiene på tvers av elementer som overskrifter, avsnitt og div-elementer i prosjektet ditt.
Hvorfor skal man velge å bruke CSS-variabler? Her er noen viktige fordeler:
- Enklere kodeoppdatering: Ved å bruke variabler kan du raskt oppdatere en verdi i hele stilarket uten å måtte endre hvert enkelt element manuelt.
- Mindre repetisjon: Etter hvert som kodebasen din vokser, vil du oppdage at du bruker mange liknende klasser og elementer. CSS-variabler gir deg muligheten til å unngå å skrive samme CSS-kode flere ganger.
- Mer vedlikeholdsvennlig kode: Et godt vedlikeholdt kodebase er avgjørende for en langsiktig suksess. Med CSS-variabler blir koden enklere å håndtere.
- Økt lesbarhet: I en verden der samarbeid er nøkkelen, er det viktig med tydelig og lesbar kode. Variabler i CSS bidrar til en mer kompakt og oversiktlig kodebase.
- Konsistent design: CSS-variabler hjelper deg med å opprettholde en enhetlig stil, selv om prosjektet ditt vokser. Du kan for eksempel definere marger, fyll, skrifttyper og farger som skal gjelde for alle knapper på nettstedet ditt.
Slik deklarerer du variabler i CSS
Nå som du har en forståelse av hva CSS-variabler er og hvorfor de er fordelaktige, kan vi se nærmere på hvordan de faktisk deklareres.
For å deklarere en CSS-variabel, starter du med elementnavnet, etterfulgt av to bindestreker (–), variabelens navn, og deretter verdien. Den generelle syntaksen er som følger:
element {
--variabel-navn: verdi;
}
Hvis du for eksempel vil angi en felles fyll for hele dokumentet, kan du definere det slik:
body {
--fyll: 1rem;
}
Omfanget til CSS-variabler
CSS-variabler kan ha lokalt omfang (tilgjengelig kun innenfor et bestemt element) eller globalt omfang (tilgjengelig i hele stilarket).
Lokale variabler
Lokale variabler defineres i en spesifikk selektor. For eksempel kan du definere en lokal variabel for en knapp. Her er et eksempel:
.knapp {
--knapp-bakgrunnsfarge: #33ff4e;
}
Denne bakgrunnsfargevariabelen vil kun være tilgjengelig for .knapp-selektoren og eventuelle underordnede elementer.
Globale variabler
Globale variabler kan benyttes i et hvilket som helst element i koden din etter at de er definert. Vi bruker pseudoklassen :root for å definere globale variabler. Slik ser det ut i praksis:
:root {
--hovedfarge: grå;
--sekundærfarge: oransje;
--skrift-vekt: 700;
}
I koden over kan du benytte deg av de definerte variablene i ulike elementer, som overskrifter, avsnitt, div-elementer eller til og med i hele body-elementet.
Hvordan bruker man variabler i CSS?
La oss skape et lite prosjekt for å demonstrere bruken av CSS-variabler. Vi oppretter filene index.html og styles.css.
I index.html-filen legger vi til en enkel div med to overskrifter (h1 og h2) samt et avsnitt (p):
<div>
<h1>Hei Front-end utvikler!!!!</h1>
<h2>Slik bruker du variabler i CSS.</h2>
<p>Fortsett å scrolle</p>
</div>
I style.css-filen legger vi inn følgende kode:
:root {
--hovedfarge: grå;
--sekundærfarge: oransje;
--skrift-vekt: 700;
--skrift-størrelse: 16px;
--skrift-stil: italic;
}
body {
background-color: var(--hovedfarge);
font-size: var(--skrift-størrelse);
}
h1 {
color: var(--sekundærfarge);
font-style: var(--skrift-stil);
}
h2 {
font-weight: var(--skrift-vekt);
}
p {
font-size: calc(var(--skrift-størrelse) * 1.2);
}
Når nettsiden blir lastet inn, vil resultatet se omtrent slik ut:
I koden over har vi definert globale variabler i :root-elementet. For å benytte de globale variablene i andre elementer, må vi bruke nøkkelordet var(). For eksempel, for å bruke bakgrunnsfargen som er definert som en global variabel, bruker vi denne koden:
background-color: var(--hovedfarge);
Hvis du ser gjennom de andre elementene, vil du se at nøkkelordet var() brukes på samme måte.
CSS-variabler sammen med JavaScript
Vi skal nå utforske hvordan du kan kombinere lokale og globale CSS-variabler med JavaScript.
La oss legge til et varslingselement i vår eksisterende kode:
Den oppdaterte index.html-filen vår ser nå slik ut:
<div>
<h1>Hei Front-end utvikler!!!!</h1>
<h2>Slik bruker du variabler i CSS.</h2>
<p>Fortsett å scrolle</p>
</div>
<div class="alert">Klikk meg!</div>
La oss style dette varselet. Legg til følgende kode i din eksisterende CSS-kode:
.alert {
--bg-color: red; /* Lokal variabel */
background-color: var(--bg-color); /* Bruker den lokale variabelen som bakgrunnsfarge*/
padding: 10px 20px;
border-radius: 4px;
font-weight: var(--skrift-vekt); /*Bruker den globale variabelen for skriftvekt*/
width: 50px;
}
Vi har gjort følgende:
- Definert en lokal variabel i varselelementet: –bg-color: red;
- Brukt nøkkelordet var() for å referere til den lokale variabelen: background-color: var(–bg-color);
- Benyttet den globale variabelen vi definerte tidligere som skriftvekt: font-weight: var(–skrift-vekt);
Legg til JavaScript-kode
La oss gjøre varselet interaktivt slik at det gir en popup-melding i nettleseren når man klikker på det. Meldingen skal si: «Vi har brukt CSS-variabler med JavaScript!!!!».
Vi legger til JavaScript-koden direkte i HTML-koden ved å omslutte den med