In breakpoint() function, remove warnings for "xxlarge only" and "xxl…

…arge down", in favor of better fallbacks in the media query output, closes #7979

scss/util/_breakpoint.scss

@@ -49,15 +49,7 @@ $breakpoint-classes: (small medium large) !default;
   @if type-of($bp) == 'string' {
     @if map-has-key($breakpoints, $bp) {
       @if $dir == 'only' or $dir == 'down' {
-        $next-bp: -zf-map-next($breakpoints, $bp);
-
-        @if $next-bp == null {
-          $bp-max: null;
-          @warn 'breakpoint(): the media query "#{$val}" cannot be used because #{$bp} is the largest breakpoint.';
-        }
-        @else {
-          $bp-max: $next-bp;
-        }
+        $bp-max: -zf-map-next($breakpoints, $bp);
       }
 
       $bp: map-get($breakpoints, $bp);
@@ -74,35 +66,40 @@ $breakpoint-classes: (small medium large) !default;
     $bp-max: -zf-bp-to-em($bp-max) - (1/16);
   }
 
-  // Skip media query creation if the input is "0 up"
+  // Conditions to skip media query creation
+  // - It's a named breakpoint that resolved to "0 down" or "0 up"
+  // - It's a numeric breakpoint that resolved to "0 " + anything
   @if $bp > 0em or $dir == 'only' or $dir == 'down' {
     // `only` ranges use the format `(min-width: n) and (max-width: n)`
     @if $dir == 'only' {
+      // Only named media queries can have an "only" range
       @if $named == true {
-        $str: $str + '(min-width: #{$bp})';
+        // Only use "min-width" if the floor is greater than 0
+        @if $bp > 0em {
+          $str: $str + '(min-width: #{$bp})';
+
+          // Only add "and" to the media query if there's a ceiling
+          @if $bp-max != null {
+            $str: $str + ' and ';
+          }
+        }
 
+        // Only use "max-width" if there's a ceiling
         @if $bp-max != null {
-          $str: $str + ' and (max-width: #{$bp-max})';
+          $str: $str + '(max-width: #{$bp-max})';
         }
       }
       @else {
-        @warn 'Only named media queries can have an `only` range.';
+        @warn 'breakpoint(): Only named media queries can have an `only` range.';
       }
     }
 
     // `down` ranges use the format `(max-width: n)`
     @else if $dir == 'down' {
-      $max: 0;
-
-      // For named breakpoints, subtract the breakpoint value by one "pixel", or 1/16em.
-      @if $named {
-        $max: $bp-max;
-      }
-      @else {
-        $max: $bp;
-      }
+      $max: if($named, $bp-max, $bp);
 
-      // Skip media query creation if input value is exactly "0 down" but don't "small down"
+      // Skip media query creation if input value is exactly "0 down",
+      // unless the function was called as "small down", in which case it's just "small only"
       @if $named or $bp > 0em {
         $str: $str + '(max-width: #{$max})';
       }

test/sass/_breakpoint.scss

@@ -25,9 +25,21 @@
   @include test('Breakpoint (Only Range) [function]') {
     $test: breakpoint(medium only);
     $expect: '(min-width: 40em) and (max-width: 63.9375em)';
+
+    $test-lowest: breakpoint(small only);
+    $expect-lowest: '(max-width: 39.9375em)';
+
+    $test-highest: breakpoint(xxlarge only);
+    $expect-highest: '(min-width: 90em)';
 
     @include assert-equal($test, $expect,
-      'Creates an only range out of a named breakpoint');
+      'Creates a min/max-width range out of a named breakpoint');
+
+    @include assert-equal($test-lowest, $expect-lowest,
+      'Creates a max-width range if the breakpoint is the lowest');
+
+    @include assert-equal($test-highest, $expect-highest,
+      'Creates a min-width range if the breakpoint is the highest');
   }
 
   @include test('Breakpoint (Named Down Range) [function]') {