Custom properties declareren en gebruiken
Definieer CSS-custom properties met het voorvoegsel -- en gebruik ze met de functie var().
Custom properties declareren en gebruiken is een gratis CSS Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Wat zijn aangepaste CSS-eigenschappen?
Met aangepaste CSS-eigenschappen (ook wel CSS-variabelen genoemd) definieer je een waarde één keer, zodat je die overal in je stylesheet kunt gebruiken. Ze volgen de syntaxis --name: value.
Aangepaste eigenschappen declareren
Declareer aangepaste eigenschappen op elk element. Als je ze op :root declareert, zijn ze overal beschikbaar:
<div class="demo">Custom properties declared on :root</div>
De functie var() gebruiken
Verwijs naar een aangepaste eigenschap met de functie var():
<button>Styled Button</button>
Aangepaste eigenschappen worden overgenomen
Aangepaste eigenschappen volgen de normale overerving van CSS. Een eigenschap die op een ouder is gedefinieerd, is beschikbaar voor alle afstammelingen, tenzij die wordt overschreven.
<div class="card">
<div class="card__body">Inherits --card-bg from .card</div>
</div>
Ongeldige waarden van aangepaste eigenschappen
In tegenstelling tot gewone CSS-eigenschappen zorgt een ongeldige waarde van een aangepaste eigenschap er niet voor dat de declaratie wordt genegeerd — de variabele wordt eenvoudigweg ongewijzigd als waarde gebruikt. De eigenschap die de waarde gebruikt, bepaalt vervolgens of die geldig is.
Aangepaste eigenschappen versus Sass-variabelen
Belangrijke verschillen:
- Aangepaste CSS-eigenschappen zijn dynamisch in de browser — ze worden tijdens runtime bijgewerkt
- Sass-variabelen verdwijnen tijdens het bouwen
- Aangepaste eigenschappen kunnen met JavaScript worden gewijzigd
- Aangepaste eigenschappen houden rekening met de cascade en overerving
Naamgevingsconventies
Geef aangepaste eigenschappen een semantische naam, niet een naam op basis van hun visuele waarde. Zo kun je ze later eenvoudig bijwerken:
<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>
Globaal bereik versus componentbereik
Definieer globale waarden in :root en componentspecifieke waarden in de hoofdklasse van het component:
<div class="card">Global font-size-base + component-scoped card vars</div>
Aangepaste eigenschappen in calc()
Aangepaste eigenschappen werken binnen calc() — ze moeten een eenheid bevatten wanneer ze worden gebruikt in berekeningen van afmetingen:
<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>
Responsieve aangepaste eigenschappen
Wijzig de waarden van aangepaste eigenschappen in mediaquery's voor responsieve systemen met waarden:
<div class="section">Padding grows to 6rem on wide screens</div>
Aangepaste eigenschappen voor animaties
Animeer elementen door een aangepaste eigenschap te wijzigen (vaak via JavaScript) in plaats van meerdere afzonderlijke eigenschappen:
<div class="progress-track">
<div class="progress"></div>
</div>
Korte controle
Hoe declareer je een globale aangepaste CSS-eigenschap met de naam --accent?
Samenvatting
Aangepaste CSS-eigenschappen worden gedeclareerd met --name: value en gebruikt met var(--name). Declareer globale waarden op :root en beperk componentwaarden tot componentselectors. Ze zijn dynamisch, houden rekening met de cascade en kunnen door JavaScript worden gewijzigd — waardoor ze veel krachtiger zijn dan Sass-variabelen.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Custom properties declareren en gebruiken” gratis?
Ja — de volledige tekst van “Custom properties declareren en gebruiken” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Custom properties declareren en gebruiken”?
Definieer CSS-custom properties met het voorvoegsel -- en gebruik ze met de functie var(). Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Custom properties declareren en gebruiken”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Custom properties declareren en gebruiken
- Fallbackwaarden en var()
- Variabelen afbakenen tot componenten
- Variabelen bijwerken met JavaScript