Space

$space-inset-default = 16px 16px 16px 16px;
$space-inset-xs = 4px 4px 4px 4px;
$space-inset-s = 8px 8px 8px 8px;
$space-inset-m = 16px 16px 16px 16px;
$space-inset-l = 32px 32px 32px 32px;
$space-inset-xl = 64px 64px 64px 64px;
$space-stack-default = 0 0 16px 0;
$space-stack-xs = 0 0 4px 0;
$space-stack-s = 0 0 8px 0;
$space-stack-m = 0 0 16px 0;
$space-stack-l = 0 0 32px 0;
$space-stack-xl = 0 0 64px 0;
$space-default = 16px;
$space-xs = 4px;
$space-s = 8px;
$space-m = 16px;
$space-l = 32px;
$space-xl = 64px;

Thanks for the great article, @nathanacurtis!

Have you thought about defining the stack and inset value lists using the variables which define the core values?

$space-default = 16px;
$space-xs = $space-s / 2;
$space-s = $space-default / 2;
$space-m = $space-default;
$space-l = $space-default * 2;
$space-xl = $space-l * 2;

$space-inset-default = $space-default $space-default $space-default $space-default;
$space-inset-xs = $space-xs $space-xs $space-xs $space-xs;
$space-inset-s = $space-s $space-s $space-s $space-s;
$space-inset-m = $space-m $space-m $space-m $space-m;
$space-inset-l = $space-l $space-l $space-l $space-l;
$space-inset-xl = $space-xl $space-xl $space-xl $space-xl;

$space-stack-default = 0 0 $space-default 0;
$space-stack-xs = 0 0 $space-xs 0;
$space-stack-s = 0 0 $space-s 0;
$space-stack-m = 0 0 $space-m 0;
$space-stack-l = 0 0 $space-l 0;
$space-stack-xl = 0 0 $space-xl 0;

Or maybe the raw values, while repetitious, provides clarity? Clarity should usually prevail over DRY code.

@tysongach Just saw that. We considered variables but YAML doesn't process 'em that way. So we had to be explicit both for YAML (processing through JSON to SASS).