Spacer variable refactor

modules/primer-marketing-support/lib/variables.scss

@@ -21,12 +21,12 @@ $h000-size-mobile: 48px !default;
 
 // Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
 // i.e. After 40px, we have 48, 64, 80, 96, etc.
-$spacer-7:  $spacer * 6;  // 48px
-$spacer-8:  $spacer * 8;  // 64px
-$spacer-9:  $spacer * 10; // 80px
-$spacer-10: $spacer * 12; // 96px
-$spacer-11: $spacer * 14; // 112px
-$spacer-12: $spacer * 16; // 128px
+$spacer-7:  $spacer * 6 !default;  // 48px
+$spacer-8:  $spacer * 8 !default;  // 64px
+$spacer-9:  $spacer * 10 !default; // 80px
+$spacer-10: $spacer * 12 !default; // 96px
+$spacer-11: $spacer * 14 !default; // 112px
+$spacer-12: $spacer * 16 !default; // 128px
 
 $marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
 $allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;

modules/primer-support/lib/variables/layout.scss

@@ -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
@@ -43,33 +57,47 @@ $container-width: 980px !default;
 $grid-gutter:     10px !default;
 
 // Breakpoint widths
-$width-xs: 0;
-$width-sm: 544px;
-$width-md: 768px;
-$width-lg: 1012px;
-$width-xl: 1280px;
+$width-xs: 0 !default;
+// Small screen / phone
+$width-sm: 544px !default;
+// Medium screen / tablet
+$width-md: 768px !default;
+// Large screen / desktop (980 + (16 * 2)) <= container + gutters
+$width-lg: 1012px !default;
+// Extra large screen / wide desktop
+$width-xl: 1280px !default;
 
 // Responsive container widths
 $container-md: $width-md !default;
 $container-lg: $width-lg !default;
 $container-xl: $width-xl !default;
 
-// Breakpoints
+// Breakpoints in the form (name: length)
 $breakpoints: (
-  // Small screen / phone
   sm: $width-sm,
-  // Medium screen / tablet
   md: $width-md,
-  // Large screen / desktop (980 + (16 * 2)) <= container + gutters
   lg: $width-lg,
-  // Extra large screen / wide desktop
   xl: $width-xl
 ) !default;
 
-$responsive-variants: ("": "");
-@each $key in map-keys($breakpoints) {
-  $responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
-}
+// This map in the form (breakpoint: variant) is used to iterate over
+// breakpoints and create both responsive and non-responsive classes in one
+// loop:
+//
+// ```scss
+// @each $breakpoint, $variant of $responsive-variants {
+//   @include breakpoint($breakpoint) {
+//     .foo#{$variant}-bar { foo: bar !important; }
+//   }
+// }
+// ```
+$responsive-variants: (
+  "": "",
+  sm: "-sm",
+  md: "-md",
+  lg: "-lg",
+  xl: "-xl",
+) !default;
 
 // responive utility position values
 $responsive-positions: (

modules/primer-utilities/lib/margin.scss

@@ -5,10 +5,7 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
-    @for $i from 1 through length($spacers) {
-      $size: nth($spacers, $i); // sm, md, lg, xl
-      $scale: $i - 1;  // 0, 1, 2, 3, 4, 5, 6
-
+    @each $scale, $size in $spacer-map {
       /* Set a $size margin to all sides at $breakpoint */
       .m#{$variant}-#{$scale}  { margin: $size !important; }
       /* Set a $size margin on the top at $breakpoint */

modules/primer-utilities/lib/padding.scss

@@ -6,10 +6,7 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
-    @for $i from 1 through length($spacers) {
-      $size: nth($spacers, $i); // xs, sm, md, lg, xl
-      $scale: $i - 1;  // 0, 1, 2, 3, 4, 5, 6
-
+    @each $scale, $size in $spacer-map {
       /* Set a $size padding to all sides at $breakpoint */
       .p#{$variant}-#{$scale}  { padding: $size !important; }
       /* Set a $size padding to the top at $breakpoint */