From 45374f2b7c0c5ed9bc437d9ee92209570e8e0c5d Mon Sep 17 00:00:00 2001
From: Mitko Georgiev <omnichronous@gmail.com>
Date: Fri, 15 Jun 2018 14:43:19 +0300
Subject: [PATCH 1/2] Easy merging of new grid breakpoints and containers

This change follows exactly what was done for the `$grays`, `$colors`, and `$theme-colors` lists in #23260. This allows for easy addition of new breakpoints or grid containers also.
---
 scss/_variables.scss | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 51a453dea847..0459faff7a6c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -182,13 +182,15 @@ $paragraph-margin-bottom:   1rem !default;
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
-$grid-breakpoints: (
+$grid-breakpoints: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$grid-breakpoints: map-merge((
   xs: 0,
   sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px
-) !default;
+), $grid-breakpoints);
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints);
@@ -198,12 +200,14 @@ $grid-breakpoints: (
 //
 // Define the maximum width of `.container` for different screen sizes.
 
-$container-max-widths: (
+$container-max-widths: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$container-max-widths: map-merge((
   sm: 540px,
   md: 720px,
   lg: 960px,
   xl: 1140px
-) !default;
+), $container-max-widths);
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 

From 6cfd7d6076b42ddcb99ff33f27ac07889e0a91df Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 21 Oct 2018 12:33:28 -0700
Subject: [PATCH 2/2] Update syntax for linter

---
 scss/_variables.scss | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8ca36b231972..8db7b49fe344 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -184,13 +184,16 @@ $paragraph-margin-bottom:   1rem !default;
 
 $grid-breakpoints: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$grid-breakpoints: map-merge((
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px
-), $grid-breakpoints);
+$grid-breakpoints: map-merge(
+  (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px
+  ),
+  $grid-breakpoints
+);
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints);
@@ -202,12 +205,15 @@ $grid-breakpoints: map-merge((
 
 $container-max-widths: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$container-max-widths: map-merge((
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px
-), $container-max-widths);
+$container-max-widths: map-merge(
+  (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px
+  ),
+  $container-max-widths
+);
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");