Deklarera och använda anpassade egenskaper
Definiera CSS-anpassade egenskaper med prefixet -- och använd dem med funktionen var().
Deklarera och använda anpassade egenskaper är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad är CSS-anpassade egenskaper?
Anpassade CSS-egenskaper (även kallade CSS-variabler) låter dig definiera ett återanvändbart värde en gång och använda det i hela formatmallen. De följer syntaxen --name: value.
Deklarera anpassade egenskaper
Deklarera anpassade egenskaper på valfritt element. Om du deklarerar dem på :root blir de tillgängliga globalt:
<div class="demo">Custom properties declared on :root</div>
Använda funktionen var()
Referera till en anpassad egenskap med funktionen var():
<button>Styled Button</button>
Anpassade egenskaper ärvs
Anpassade egenskaper följer CSS:s vanliga arv. En egenskap som definieras på ett överordnat element är tillgänglig för alla dess underordnade element, om den inte åsidosätts.
<div class="card">
<div class="card__body">Inherits --card-bg from .card</div>
</div>
Ogiltiga värden för anpassade egenskaper
Till skillnad från vanliga CSS-egenskaper gör ett ogiltigt värde för en anpassad egenskap inte att deklarationen ignoreras – variabeln löses helt enkelt till sitt värde som det är. Den egenskap där värdet används avgör sedan om det är giltigt.
Anpassade egenskaper jämfört med Sass-variabler
Viktiga skillnader:
- CSS-anpassade egenskaper är levande i webbläsaren – de uppdateras dynamiskt
- Sass-variabler försvinner vid kompileringen
- Anpassade egenskaper kan ändras med JavaScript
- Anpassade egenskaper följer kaskaden och arvet
Namngivningskonventioner
Namnge anpassade egenskaper semantiskt, inte efter deras visuella värde. Då blir de enkla att uppdatera senare:
<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>
Globalt omfång jämfört med komponentomfång
Definiera globala tokens i :root och komponentspecifika värden på komponentens rotklass:
<div class="card">Global font-size-base + component-scoped card vars</div>
Anpassade egenskaper i calc()
Anpassade egenskaper fungerar inuti calc() – de måste innehålla enheter när de används i dimensionsberäkningar:
<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>
Responsiva anpassade egenskaper
Ändra värden för anpassade egenskaper i media queries för responsiva tokensystem:
<div class="section">Padding grows to 6rem on wide screens</div>
Anpassade egenskaper för animering
Animera element genom att ändra en anpassad egenskap (ofta via JavaScript) i stället för flera enskilda egenskaper:
<div class="progress-track">
<div class="progress"></div>
</div>
Snabb kontroll
Hur deklarerar du en global CSS-anpassad egenskap med namnet --accent?
Sammanfattning
CSS-anpassade egenskaper deklareras med --name: value och används med var(--name). Deklarera globala tokens på :root och begränsa komponentvärden till komponentselektorer. De är levande, följer kaskaden och kan ändras av JavaScript – vilket gör dem mycket kraftfullare än Sass-variabler.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Deklarera och använda anpassade egenskaper” gratis?
Ja – hela texten till ”Deklarera och använda anpassade egenskaper” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Deklarera och använda anpassade egenskaper”?
Definiera CSS-anpassade egenskaper med prefixet -- och använd dem med funktionen var(). Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Deklarera och använda anpassade egenskaper”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Deklarera och använda anpassade egenskaper
- Reservvärden och var()
- Avgränsa variabler till komponenter
- Uppdatera variabler med JavaScript