Skip to content

Instantly share code, notes, and snippets.

@nathanacurtis
Created September 23, 2016 21:25
Show Gist options
  • Save nathanacurtis/bc5b1011f45f4764643014b580fd1bdd to your computer and use it in GitHub Desktop.
Save nathanacurtis/bc5b1011f45f4764643014b580fd1bdd to your computer and use it in GitHub Desktop.
$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;
@tysongach
Copy link

tysongach commented Oct 25, 2016

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.

@nathanacurtis
Copy link
Author

@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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment