Значения интервалов
Шкала интервалов адаптивная: одна и та же ступень на узком экране меньше, чем на широком. Сами значения — ступени шкалы размеров, а не произвольные числа.
Базовая ступень 1 равна размеру шрифта по умолчанию. Меньшее записано
долями, большее — целыми.
Когда применять
Когда нужно понять, сколько именно даст выбранная ступень, или подобрать ступень под известное расстояние из макета.
Пример
--sf-space-1 — это 12 пикселей на узком экране и 16 на широком: ступень
b2 и ступень b6 одной шкалы.
.card {
padding: var(--sf-space-1);
}
Таблица
Пиксели приведены при 1rem = 16px. Граница между колонками — контрольная точка lg (60rem).
| Ступень | До lg |
От lg |
||
|---|---|---|---|---|
--sf-space-0 |
0 |
0px | 0 |
0px |
--sf-space-1/4 |
var(--sf-a4) |
4px | var(--sf-a4) |
4px |
--sf-space-1/3 |
var(--sf-a8) |
8px | var(--sf-a8) |
8px |
--sf-space-1/2 |
var(--sf-a8) |
8px | var(--sf-b2) |
12px |
--sf-space-1 |
var(--sf-b2) |
12px | var(--sf-b6) |
16px |
--sf-space-2 |
var(--sf-b6) |
16px | var(--sf-c0) |
20px |
--sf-space-3 |
var(--sf-b6) |
16px | var(--sf-c2) |
24px |
--sf-space-4 |
var(--sf-c2) |
24px | var(--sf-c6) |
32px |
--sf-space-5 |
var(--sf-c6) |
32px | var(--sf-d0) |
40px |
--sf-space-6 |
var(--sf-c6) |
32px | var(--sf-d2) |
48px |
--sf-space-7 |
var(--sf-d0) |
40px | var(--sf-d6) |
64px |
--sf-space-8 |
var(--sf-d2) |
48px | var(--sf-e0) |
80px |
Что не следует делать
Не подставляйте пиксели вместо ступени: ступень меняется вместе с шириной экрана, число — нет. И не вводите свою числовую шкалу поверх этой — тогда в проекте окажется два ряда интервалов, которые придётся согласовывать вручную.