:root { --card-accent: #0f766e; } .card--alert { --card-accent: #dc2626; } .card-title { color: var(--card-accent); }Cardurile normale folosesc verdele, iar varianta alertă schimbă tokenul local în roșu.
LECȚIA 93 DIN 100
Suprascrie un token într-o componentă
Schimbă accentul numai pentru varianta de alertă a cardului.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Proprietățile personalizate se moștenesc implicit. O valoare mai apropiată în arbore poate suprascrie tokenul pentru componenta și descendenții ei fără duplicarea regulii consumatoare.
.card-title { color: #0f766e; } .card--alert .card-title { color: #dc2626; }Duplicarea regulii funcționează vizual, dar nu exersează configurarea componentei printr-un token moștenit.
PASUL 2 · APLICĂ
Exercițiul tău
Definește tokenul de bază #0f766e, suprascrie-l cu #dc2626 în .card--alert și citește-l în .card-title.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Tokenul de bază este #0f766e.
- ○Varianta alertă suprascrie tokenul cu #dc2626.
- ○Titlul citește tokenul moștenit.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Aceeași regulă .card-title consumă tokenul, iar cascada decide valoarea potrivită în fiecare context.