:root { --space-unit: 8px; } .panel { padding: calc(var(--space-unit) + var(--space-unit) + var(--space-unit)); }Три единицы по 8px дают padding 24px.
УРОК 94 ИЗ 100
Рассчитайте отступ из токена
Создайте согласованный padding на основе общей единицы.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
Пользовательское свойство может хранить размер, а calc() объединяет значения после подстановки var(). Здесь мы не используем умножение, а складываем единицу три раза для ясной совместимости.
.panel { padding: calc(--space-unit + --space-unit); }Токен нужно читать через var(); одно имя не является значением длины.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Задайте --space-unit: 8px и padding как сумму трёх var(--space-unit).
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Единица отступа равна 8px.
- ○Padding складывает три единицы.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
Браузер трижды подставляет токен, затем вычисляет сумму совместимых длин.