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:
parent
2be44f23cc
commit
eaeb6a7d32
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user