:root { --space-unit: 8px; } .panel { padding: calc(var(--space-unit) + var(--space-unit) + var(--space-unit)); }Trei unități de 8px produc un padding de 24px.
LECȚIA 94 DIN 100
Calculează spațierea dintr-un token
Construiește un padding coerent pornind de la o unitate comună.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
O proprietate personalizată poate păstra o dimensiune, iar calc() poate combina valoarea după substituirea var(). Înmulțirea nu este folosită aici; adunăm de trei ori unitatea pentru compatibilitate clară.
.panel { padding: calc(--space-unit + --space-unit); }Tokenul trebuie citit prin var(); numele singur nu este o valoare de lungime.
PASUL 2 · APLICĂ
Exercițiul tău
Setează --space-unit la 8px și padding la suma a trei var(--space-unit).
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
- ○Unitatea de spațiere este 8px.
- ○Padding-ul însumează trei unități.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Browserul substituie tokenul de trei ori, apoi calculează suma lungimilor compatibile.