1
1
mirror of https://github.com/primer/css.git synced 2024-11-30 19:53:11 +03:00

feat(primer-support): refactor spacer variables

This refactors our spacer variables so that $spacer-n variables are the
"source of truth", $spacers is a list of the $spacer-n values, and the
new $spacer-map variable makes it easier to loop over the spacing scale
with:

@each $scale, $size in $spacer-map { ... }
This commit is contained in:
Shawn Allen 2019-01-24 14:37:48 -08:00
parent 2be44f23cc
commit eaeb6a7d32

View File

@ -11,24 +11,38 @@
// 5 => 32px
// 6 => 40px
$spacer: 8px !default;
// Our spacing scale
$spacer-0: 0 !default; // 0
$spacer-1: round($spacer / 2) !default; // 4px
$spacer-2: $spacer !default; // 8px
$spacer-3: $spacer * 2 !default; // 16px
$spacer-4: $spacer * 3 !default; // 24px
$spacer-5: $spacer * 4 !default; // 32px
$spacer-6: $spacer * 5 !default; // 40px
// The list of spacer values
$spacers: (
0,
round($spacer / 2),
$spacer,
$spacer * 2,
$spacer * 3,
$spacer * 4,
$spacer * 5
$spacer-0,
$spacer-1,
$spacer-2,
$spacer-3,
$spacer-4,
$spacer-5,
$spacer-6,
) !default;
// Aliases for easy use
$spacer-0: nth($spacers, 1) !default; // 0
$spacer-1: nth($spacers, 2) !default; // 4px
$spacer-2: nth($spacers, 3) !default; // 8px
$spacer-3: nth($spacers, 4) !default; // 16px
$spacer-4: nth($spacers, 5) !default; // 24px
$spacer-5: nth($spacers, 6) !default; // 32px
$spacer-6: nth($spacers, 7) !default; // 40px
// And the map of spacers, for easier looping:
// @each $scale, $length in $spacer-map { ... }
$spacer-map: (
0: $spacer-0,
1: $spacer-1,
2: $spacer-2,
3: $spacer-3,
4: $spacer-4,
5: $spacer-5,
6: $spacer-6,
) !default;
// Em spacer variables
$em-spacer-1: 0.0625em !default; // 1/16