Deklarere og bruke egendefinerte egenskaper
Definer egendefinerte CSS-egenskaper med ---prefiks, og bruk dem med var()-funksjonen.
Deklarere og bruke egendefinerte egenskaper er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva er egendefinerte CSS-egenskaper?
Egendefinerte CSS-egenskaper (også kalt CSS-variabler) lar Dem definere en gjenbrukbar verdi én gang og bruke den i hele stilarket. De følger syntaksen --name: value.
Deklarering av egendefinerte egenskaper
Deklarer egendefinerte egenskaper på et hvilket som helst element. Hvis De deklarerer dem på :root, blir de tilgjengelige globalt:
<div class="demo">Custom properties declared on :root</div>
Bruk av funksjonen var()
Referer til en egendefinert egenskap med funksjonen var():
<button>Styled Button</button>
Egendefinerte egenskaper arves
Egendefinerte egenskaper følger vanlig CSS-arv. En egenskap som er definert på et overordnet element, er tilgjengelig for alle underordnede elementer med mindre den overstyres.
<div class="card">
<div class="card__body">Inherits --card-bg from .card</div>
</div>
Ugyldige verdier for egendefinerte egenskaper
I motsetning til vanlige CSS-egenskaper fører ikke en ugyldig verdi for en egendefinert egenskap til at deklarasjonen ignoreres – variabelen løses ganske enkelt til verdien slik den er. Egenskapen som bruker verdien, avgjør deretter om den er gyldig.
Egendefinerte egenskaper kontra Sass-variabler
Viktige forskjeller:
- Egendefinerte CSS-egenskaper er dynamiske i nettleseren – de oppdateres dynamisk
- Sass-variabler kompileres bort ved byggetidspunktet
- Egendefinerte egenskaper kan endres med JavaScript
- Egendefinerte egenskaper følger kaskaden og arven
Navnekonvensjoner
Gi egendefinerte egenskaper semantiske navn, ikke navn basert på den visuelle verdien. Da blir de enklere å oppdatere senere:
<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>
Globalt omfang kontra komponentomfang
Definer globale tokens i :root og komponentspesifikke verdier på komponentens rotklasse:
<div class="card">Global font-size-base + component-scoped card vars</div>
Egendefinerte egenskaper i calc()
Egendefinerte egenskaper fungerer inne i calc() – de må inneholde enheter når de brukes i dimensjonsberegninger:
<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>
Responsive egendefinerte egenskaper
Endre verdier for egendefinerte egenskaper i media queries for responsive tokensystemer:
<div class="section">Padding grows to 6rem on wide screens</div>
Egendefinerte egenskaper for animasjon
Animer elementer ved å endre en egendefinert egenskap (ofte via JavaScript) i stedet for flere individuelle egenskaper:
<div class="progress-track">
<div class="progress"></div>
</div>
Sjekk deg selv
Hvordan deklarerer De en global egendefinert CSS-egenskap med navnet --accent?
Oppsummering
Egendefinerte CSS-egenskaper deklareres med --name: value og brukes med var(--name). Deklarer globale tokens på :root, og begrens komponentverdier til komponentvelgere. De er dynamiske, følger kaskaden og kan endres med JavaScript – noe som gjør dem langt kraftigere enn Sass-variabler.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Deklarere og bruke egendefinerte egenskaper» gratis?
Ja – hele teksten i «Deklarere og bruke egendefinerte egenskaper» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Deklarere og bruke egendefinerte egenskaper»?
Definer egendefinerte CSS-egenskaper med ---prefiks, og bruk dem med var()-funksjonen. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Deklarere og bruke egendefinerte egenskaper»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Deklarere og bruke egendefinerte egenskaper
- Reserveverdier og var()
- Avgrense variabler til komponenter
- Oppdatere variabler med JavaScript