From 289604605f38652434725b643bdee4df98b0b2c0 Mon Sep 17 00:00:00 2001
From: Shawn Allen <shawn.allen@github.com>
Date: Thu, 24 Jan 2019 14:42:10 -0800
Subject: [PATCH] refactor(primer-support): make $responsive-variants easier to
 grok

---
 .../primer-support/lib/variables/layout.scss  | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/modules/primer-support/lib/variables/layout.scss b/modules/primer-support/lib/variables/layout.scss
index 0203adb8..0e50459f 100644
--- a/modules/primer-support/lib/variables/layout.scss
+++ b/modules/primer-support/lib/variables/layout.scss
@@ -80,10 +80,24 @@ $breakpoints: (
   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: (