From 32ed268c827672e41382f5ceed5feb4487a22ef2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 25 Mar 2017 22:23:40 -0700 Subject: [PATCH] fixes #22245: revamp the breakpoint-between and breakpoint-only mixins to actually work --- scss/mixins/_breakpoints.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 904b60f7ad..be1d034d84 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -78,10 +78,11 @@ // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { - @include media-breakpoint-up($lower, $breakpoints) { - @include media-breakpoint-down($upper, $breakpoints) { - @content; - } + $min: breakpoint-max($lower, $breakpoints); + $max: breakpoint-max($upper, $breakpoints); + + @media (min-width: $min) and (max-width: $max) { + @content; } } @@ -89,7 +90,10 @@ // 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-between($name, $name, $breakpoints) { + $min: breakpoint-min($name, $breakpoints); + $max: breakpoint-max($name, $breakpoints); + + @media (min-width: $min) and (max-width: $max) { @content; } }