Revert "Remove libsass @media nesting bug workaround"

This reverts commit d6a5ebf438080a71bc78b561be20160afc12e6ec.

There has not been a release of libsass with this fix yet, sorry!

1 files changed, 14 insertions, 2 deletions

diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 790bb7343..232b9416f 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -68,9 +68,21 @@
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  @include media-breakpoint-up($name, $breakpoints) {
-    @include media-breakpoint-down($name, $breakpoints) {
+  // Nested media query combination does not work in libsass yet
+  // https://github.com/sass/libsass/issues/185
+  // Work around until the issue is resolved:
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+  @if $min and $max {
+    @media (min-width: $min) and (max-width: $max) {
       @content;
     }
+  } @else {
+    // One of min or max is a no-op, so this branch is not affected by libsass#185
+    @include media-breakpoint-up($name, $breakpoints) {
+      @include media-breakpoint-down($name, $breakpoints) {
+        @content;
+      }
+    }
   }
 }