--size-16
is twice as much as --size-8
for example. One size unit is equal to 4px
.--size-*
margin
, padding
, width
,height
, etc)--size-px
1px
--size-1
4px
--size-2
8px
--size-3
12px
--size-4
16px
--size-5
20px
--size-6
24px
--size-7
28px
--size-8
32px
--size-9
36px
--size-10
40px
--size-11
44px
--size-12
48px
--size-14
56px
--size-16
64px
--size-20
80px
--size-24
96px
--size-28
112px
--size-32
128px
--size-36
144px
--width-*
max-width
--width-xs
480px
--width-sm
640px
--width-md
768px
--width-lg
1024px
--width-xl
1280px